Tippyjs: What happened to destroyAll()?

[gregblass]

Hey there! I needed some of the later features of tippy, and had to update the library to the latest version.

I use turbolinks and need to destroy all tippy instances before caching the page.

I used to be able to do $('.js-tooltip').destroyAll();

Is that gone now? I can't find any information about it on github anymore (was the repository restarted from scratch or something?)

I use tippy all over the place throughout our app - without references to the instance.

Thanks in advance!

[gregblass]

Here's what I came up with that seems to work?

```
var tooltips = document.querySelector('.js-tooltip');
var popovers = document.querySelector('.js-popover');

if (tooltips != null) {
tooltips._tippy.destroy();
}

if (popovers != null) {
popovers._tippy.destroy();
}
```

Any reasoning for removing that function though? It seems like it would be useful?

[guanzo]

How about a way to manage all tippy instances? There is a way to hide all https://atomiks.github.io/tippyjs/v6/methods/#hideall.

That means the lib has a reference to all tippys. Here: https://github.com/atomiks/tippyjs/blob/7c80e611727bf0638c73f77421078fa0cc79c9e4/src/createTippy.ts#L41

Why is hideAll the only global method?

I need a clean way to update options on all tippy instances. I would rather not do it jquery style where i use a CSS selector and iterate dom nodes. I'm using vue and would like to do it programmatically, preferably thru an official API.

Possible idea

import {updateAll, hideAll, destroyAll, getAll} from 'tippy.js';

// woohoo! all tippys are now dark themed
updateAll({ theme: 'dark-theme' })

[KubaJastrz]

What do you think about exporting only getAllInstances and allowing user to create their own programmatic APIs with provided instances?

hideAll is just a mountedInstances.forEach(i => i.hide()) with some extra functionality.

[KubaJastrz]

@gregblass, to answer your question - it looks like destroyAll was removed in v2.0.0.

[guanzo]

What do you think about exporting only getAllInstances and allowing user to create their own programmatic APIs with provided instances?

I would love that. I just want an easy way to get references to all instances.

[atomiks]

You can easily recreate mountedInstances yourself

[guanzo]

mm yeah i could, but if it already exists within tippy, why not expose it for us? I get the feeling that you're hesitant to do that. Any reason why?

[atomiks]

Well the main problem is it's not a static array / reference. Although IIRC ES module exports are "live" (so you can reassign them) but I'm not certain with the way it works in various bundlers 🤔 But yes, just exporting that would enable users to create any all-type wrappers they want. Although, as the name suggests, .updateAll({}) wouldn't work with it, since it doesn't also update non-mounted instances. I think you should just store all the instances in your own global state and do whatever you want rather than rely on an exported API.

[guanzo]

Cool, will do. thanks!

[atomiks]

Example:

src/tippy.js

import tippy from 'tippy.js';

let tippyInstances = [];

const globalPlugin = {
  fn() {
    return {
      onCreate(instance) {
        tippyInstances = tippyInstances.concat(instance);
      },
      onDestroy(instance) {
        tippyInstances = tippyInstances.filter(i => i !== instance);
      }
    };
  }
};

tippy.setDefaultProps({
  plugins: [globalPlugin]
});

export default tippy;

export function updateAll(props) {
  tippyInstances.forEach(instance => {
    instance.setProps(props);
  });
}

src/index.js

import {updateAll} from './tippy';

// woohoo! all tippys are now dark themed
updateAll({
  theme: 'dark-theme'
});

[guanzo]

The example works perfectly. Thanks