[Tooltip] Perfomance issues

[diniscorreia]

I know this might require quite a refactor, but tooltip performance should be improved. It's particularly bad when you have several (let's say dozens) of tooltips on a page, because for every tooltip a new element is added to the DOM (and the initialisation process sometimes takes a bit).

Several popular JS tooltip plugins use a different approach in which a single element is created and the content on this element is updated when triggering the different tooltips. Couldn't a similar approach be implemented?

[DanielRuf]

I know this might require quite a refactor, but tooltip performance should be improved. It's particularly bad when you have several (let's say dozens) of tooltips on a page, because for every tooltip a new element is added to the DOM (and the initialisation process sometimes takes a bit).

data-click-open | boolean | true | Allows the tooltip to remain open if triggered with a click or touch event.

Never had any issues. The other solution makes it more difficult and would require reinitializations when they are opened to apply the needed transitions and options.

Can you share a codepen where we can see a performance issue caused by this?

[doubleedesign]

It's particularly bad when you have several (let's say dozens) of tooltips on a page

I am having this issue on a page with 76 tooltips. Current test page at: http://test-apso.pantheonsite.io/location/melbourne - we're using tooltips on the icons on each property. They're so slow that the client hasn't actually noticed they're there and has asked for them to be added ;)

[DanielRuf]

Thanks for the example, I'll test it.

[doubleedesign]

Thanks for the quick reply Daniel!

Unfortunately due to time constraints, I've had to replace it with an alternative (TippyJS, if anyone's interested). But I have saved a copy of the page before I changed it over, in case it is still helpful for your troubleshooting.

[DanielRuf]

We've used https://github.com/atomiks/tippyjs with createPopperInstanceOnInit set to true and this is what we have to do here too (precreating / caching the tooltip instances).

[RWAP]

Thanks Daniel - yes, this seems to be the same issue - although as explained in #11777 it only really affects Webkit based browsers (Chrome and Safari (ChomeOS) - although Edge is also impacted to some extent).

Firefox does not display the same problem.

You can easily replicate the issue using the bit of code I included in the other issue report - and this affected a table with only about 20 cells to be cloned and compared for size (using $(clone) and appendTo - not foundation related).

The js files for foundation jquery etc are loaded in the header and triggered on $(document).ready()

Perhaps adding them at the end might help - but not sure...

[DanielRuf]

We have to find a solution - independent of the used browser.

The js files for foundation jquery etc are loaded in the header and triggered on $(document).ready()

Perhaps adding them at the end might help - but not sure...

In general JS should never be loaded in the head. Please try moving them down so the DOM and scripts can load before the scripts are loaded.

[RWAP]

I have done some more experimentation, moved javascript files around etc - foundation is just much too slow at adding the tooltips in Chrome - I too have started to use tippy.js which is much more responsive...