Tippyjs: Hide tooltips and remove all instances

[Kearsan]

Hi,

First of all, thank you for this amazing plugin.

I'm loading each page of my website via ajax, this way the user never refresh the document. But of course I've to take care of memory overload on client side since JS is not cleaned up during navigation between pages.

So it's why I'm asking if there is a way to hide all tooltips and destroy all instances. The idea is to reinit tippy when the user load a new content.

Thanks for your help and keep up the good work!

[atomiks]

Option 1

Note: does not handle nodes with multiple tippys:

[...document.querySelectorAll('*')].forEach(node => {
  if (node._tippy) {
    node._tippy.destroy();
  }
});

Option 2

Keep some global variable:

window.tippyInstances = [];

Every time you call tippy(), push the instances into it

const instances = tippy('.button');
window.tippyInstances = tippyInstances.concat(instances);

When you want to destroy it:

tippyInstances.forEach(instance => {
  instance.destroy();
});
tippyInstances.length = 0; // clear it

[Kearsan]

Thanks a lot! I'll go with option 2 :)

[Volmarg]

Option 1 - ._tippy works like a charm.