tippyjs

tippyjs copied to clipboard

Bug description

If multiple Tippy's with interactive HTML content are initialised in a Singleton, only the one that is triggered will have its content available in the tab order.

It may be possible to overcome this by manually setting the tab index, but I don't see any events that fire when you change between Tippy instances within a Singleton. The Singleton's onShow, onTrigger, onHide, etc events show the first time you interact with the group, but nothing tells you which of the multiple Singleton's is active.

Reproduction

https://codepen.io/kashkin-the-looper/pen/MWmrvGG

Tab through the links in the demo. You will only be able to tab to the Section A links.

One of singletons' features is that you can apply smooth transitions to the tippy, which isn't possible if you were to change its location in the DOM to work with this sort of browser-default focus management. A JavaScript solution is likely required here.

@atomiks Thank you for the prompt reply.

One of singletons' features is that you can apply smooth transitions to the tippy, which isn't possible if you were to change its location in the DOM to work with this sort of browser-default focus management. A JavaScript solution is likely required here.

That makes sense to me; I guess I'm then wondering how to approach that Javascript solution. I can't get any output from the Singleton that tells me which instance of tippy is open.

Am I missing something or is this currently not possible?

@atomiks I'm looking to use Tippy in a production environment, and need a resolution on this. Can you please provide guidance on whether it's possible to fire events for each tippy instance within a Singleton? It doesn't seem possible to solve this issue without creating my own listeners, which seems crazy.

Sorry for the late reply, but event.currentTarget._tippy inside the onTrigger(_, event) {} hook is a way to access the current instance. I suppose storing the current instance should be something we expose to the user though.