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

Question

I was wondering whether there is a way to customize the built-in tooltip and the header tooltip using CSS? Is there a class name that can be referenced?

Answer 1

Yes, there is a class called ag-tooltip in ag-grid.css

I'm able to customized the default headerTooltip, something like below:

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

Answer 2

In case you want to customize tooltip using a 3rd party library, you can make use of cell renderer component.
Here is an example using angular cell renderer component and 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;
    }
}

Once created, you can register the custom cell renderer component using frameworkComponents gridOption. You can more details in the official doc here and more details on Cell Renderer Components

Answer 3

I used "Balham" theme in my code and I had to override the default tooltip CSS.

I made a file with the custom 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;
}

Finally, I imported the CSS file where I had implemented the Ag-Grid.

import "./customTooltipStyle.css";

This worked for me.