Search code examples
reactjstooltipag-gridag-grid-react

AG Grid tooltip takes long time to render


I was following this example and found out that the table takes quite some time to render the tooltip. It doesn't seem to have any delay whatsoever, and I have tried both defaultBrowserTooltip as well as the custom one but both of them are slow. Any given tips on this?

P/S: I'm using React

Some way that I have tried:

tooltipField: 'myTooltipField'

tooltip: (value: string): string => value

Solution

  • As of Ag-grid 23.0.0, this is configurable by the tooltipShowDelay configuration option.

    const gridOptions = {
      tooltipShowDelay: 0; // milliseconds, default value 2000ms
    };
    

    For earlier versions, Ag-grid used an internal service called TooltipManager which was not configurable.
    The default delay was 2 seconds:

    private readonly MOUSEOVER_SHOW_TOOLTIP_TIMEOUT = 2000;
    

    For these earlier versions, you could manually override it by drilling down through the modules, but for versions 23.0.0 and up this is not necessary.

    private onGridReady(params: GridReadyEvent) {
        // NB! This is unsupported and may break at any time
        try {
          (params.api as any).context.beanWrappers.tooltipManager.beanInstance.MOUSEOVER_SHOW_TOOLTIP_TIMEOUT = 0;
        } catch (e) {
          console.error(e);
        }
    }