ag-Grid 使用 CSS 自定义工具提示答案

【问题标题】：ag-Grid customize tooltip using CSSag-Grid 使用 CSS 自定义工具提示
【发布时间】：2019-07-03 02:28:29
【问题描述】：

我想知道是否有办法使用 CSS 自定义内置工具提示和标题工具提示？有没有可以引用的类名？

【问题讨论】：

它使用native browser tooltip，因此无法自定义。
ag-grid.com/documentation/vue/charts-tooltips

【解决方案1】：

如果您想使用第三方库自定义工具提示，您可以使用单元格渲染器组件。
这是一个使用角度单元渲染器组件和 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 注册自定义单元格渲染器组件。您可以在官方文档here中获得更多详细信息以及更多关于Cell Renderer Components的详细信息

【讨论】：

【解决方案2】：

是的，在 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;
}

【讨论】：