ag-Grid customize tooltip using 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