Tippyjs: singleton documentation

[strass]

Singleton mode gets shown off here but I can't find any code snippits or documentation on how to use it: https://atomiks.github.io/tippyjs/#singleton

It seems like https://github.com/atomiks/tippyjs/blob/master/website/src/pages/index.mdx is ahead (or behind) what's deployed

[atomiks]

I put it out to see if there's interest in it

Looks like there is! Because I only deployed that like 2 days ago. I'll get around to writing docs for it soon 🙂

[strass]

cool, please close this issue when you do so that I get an email <3

thanks for your work on tippy, it looks beautiful :)

[atomiks]

I pushed the example. Here you can see it in React code

[strass]

I appreciate it, will definitely be using this

[supert56]

This is super useful but I was wondering if there is an example anywhere for use with React and Typescript?

[atomiks]

Idk about TypeScript, but the API is an official part of v5 (@next version) now, and the React version should look something like this (how it's implemented on the website currently)

https://github.com/atomiks/tippyjs/blob/7ac9ae2d139776a04fc61e737f88d87613dc2c5e/website/src/tippy.js/index.js#L162-L183

[supert56]

Thanks for this, I will give it a go! Awesome package! 🙌

[cn-d]

Lot's of interest over here. Do you happen to know of any examples that are library agnostic?

[atomiks]

You can use it already with tippy.js@next beta version. The docs are available in mdx files on the v5 branch.

[elbulla]

Another side effect that may be good to document is that tooltips triggered by one event get hidden by other events (for example the default triggers of mouseenter and focus). Without the singleton, if you trigger a tooltip with focus, and then trigger another one with mouseenter, the first one does not get hidden.