Ag-grid custom tooltip component template not showing

Question

With ag-grid and ng7, I created a custom tooltip component, binding it to column definition tooltipComponent, along with headertooltip, and headername. When I hover on the header, the console.log from agInit gets called, however the template is not rendered

base on official ag-grid tooltip guide, there is a method called getGui that could also render html. Tried that as well, nothing shown when hover on header.

    <ag-grid-angular
      #agGrid
      [frameworkComponents]="frameworkComponents"
      ...
    ></ag-grid-angular>

    headerName: 'Atheltes`
    tooltipComponent: 'customTooltip',
    headerTooltip: 'Helper text should show here'
    this.frameworkComponents = { customTooltip: CustomTooltipComponent };

@Component({
    selector: 'ffp-tooltip-component',
    template: `<div>It should show helper text</div>`,
})
export class CustomTooltipComponent implements ITooltipAngularComp {
    agInit(params: ITooltipParams) {
       console.log('this console log works!!')
       // console.log above gets called, however, no template is shown.
    }

    getGui(): any {
    }
}

I expect when I hover on the header Atheletes, I should see a tooltip text of Helper text should show here.

Potherb

Answer 1

I tried out the Plunker example provided by ag-grid at https://www.ag-grid.com/javascript-grid-tooltip-component and found a couple of things that may help:

1. While I couldn't find it in the documentation, it seems that the column definition must have a tooltipField entry, or the tooltip will not show.

2. There is a significant delay, maybe 3 seconds or so, before the tooltip displays, so you need to hover over a cell for at least that long to see the tooltip.

Pinchhit

For second point, if you don't want the delay, set tooltipShowDelay: 0, in gridOptions – Fyrd

Thanks! tooltipField was definitely needed! – Snobbery

Answer 2

I modified tooltip property of ag-grid and it worked out for me.

 .ag-tooltip {
      background-color: white !important;
      border-radius: 1px !important;
      padding: 5px !important;
      border-width: 1px !important;
      border-style: solid !important;
      border-color: #545454 !important;
}   

Placida