AG Grid tooltip takes long time to render

Question

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

instead of putting a bounty on this, you may want to reconsider and provide an MVCE (see: https://stackoverflow.com/help/minimal-reproducible-example). This might also help you understand the problem a bit better. As it is now, there is simply nothing to go on. The problem could be anything, including hell of a slow developer machine... — konqi, May 27 '19 at 15:44
@konqi The issue is present in the linked library demo page, not inherent to a specific set-up. — Etheryte, Aug 07 '19 at 09:31

Etheryte · Accepted Answer · 2022-01-24T21:23:44.420

18

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 get the service reference from the bean bag and override it, 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);
    }
}

edited Jan 24 '22 at 21:23

answered Aug 07 '19 at 09:27

Etheryte

24,589
11
71
116

1

This works. Another problem I'm facing is, there seems to be no delay at all after the initial appearance. So if I set the delay to 500ms, this only works for the first time. When I move my mouse over to another element with tooltip, it will display immediately instead of delaying for 500ms. Which is annoying. Do you know if theres a solution to this as well? – FeCH Oct 17 '19 at 20:00
1

@FeCH Haven't looked into it myself since we didn't need that usage, you can check out [the tooltipManager.ts source](https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-community/src/ts/widgets/tooltipManager.ts#L81) for more implementation details. – Etheryte Oct 17 '19 at 20:53
it is deprecated in v23.0 – shutsman May 27 '20 at 12:52
how about this issue? do you know any solution? https://stackoverflow.com/questions/62047444/ag-grid-keep-open-tooltip-for-a-certain-predefined-time – shutsman May 27 '20 at 16:08

score 5 · Answer 2 · answered Oct 17 '19 at 03:08

5

This is directly "borrowed" from user demostheneslld who commented on the ag-grid GitHub feature request, but you can set enableBrowserTooltips: true on the grid options object and then the tooltips will be displayed natively by the browser, rather than formatted by ag-grid. The tooltips then appear almost instantly.

answered Oct 17 '19 at 03:08

S. Baggy

950
10
21

Did not work for me on chrome. It just changed the style of the tooltip, but still seemed to take ~2seconds. – DannyMoshe May 03 '20 at 18:23

score 5 · Answer 3 · answered May 05 '20 at 09:07

There is now a property for this called tooltipShowDelay, it was included in version 23.0.0 released on march 17th 2020. Docs https://www.ag-grid.com/javascript-grid-properties/#miscellaneous and changelog https://www.ag-grid.com/ag-grid-changelog/?fixVersion=23.0.0

score 1 · Answer 4 · answered Dec 25 '20 at 11:00

1

There is a new prop released now:

tooltipShowDelay={0}

this above code will show tooltip instantly. More Info

answered Dec 25 '20 at 11:00

Arty

859
2
12
31

AG Grid tooltip takes long time to render

4 Answers4