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";

这对我有用。