ag-Grid 使用 CSS 自定義工具提示

Question

我想知道是否有辦法使用 CSS 自定義內置工具提示和 header 工具提示？ 有沒有可以引用的 class 名稱？

Answer 1

是的，在 ag-grid.css 中有一個叫做 ag-tooltip 的類

我可以自定義默認的 headerTooltip，如下所示：

.ag-tooltip{
   background-color: #0f1014;
   color: #999eab;
   border-radius: 2px;
   padding: 5px;
   border-width: 1px;
   border-style: solid;
   border-color: #545454;
}

Answer 2

如果您想使用 3rd 方庫自定義工具提示，您可以使用單元渲染器組件。
這是一個使用角度單元渲染器組件和 ngx-bootstrap 的示例。

@Component({
    selector: 'tooltip-cell',
    template: `<span tooltip="Custom text" container="body">{{params.value}}</span>`,
})
export class ToolTipRenderer implements ICellRendererAngularComp {
    public params: any;

    agInit(params: any): void {
        this.params = params;
    }

    refresh(): boolean {
        return false;
    }
}

創建后，您可以使用 frameworkComponents gridOption 注冊自定義單元格渲染器組件。 您可以在此處的官方文檔中了解更多詳細信息以及有關Cell Renderer Components 的更多詳細信息

Answer 3

我在我的代碼中使用了“Balham”主題，我不得不覆蓋默認的工具提示 CSS。

我使用自定義 CSS 制作了一個文件。

.ag-theme-balham .ag-tooltip {
  background-color: black;
  color: white;
  border-radius: 2px;
  padding: 10px 16px;
  border-width: 1px;
  border-style: solid;
  border-color: #cbd0d3;
  transition: opacity 1s;
}

最后，我導入了實現 Ag-Grid 的 CSS 文件。

import "./customTooltipStyle.css";

這對我有用。