Tippyjs: interactive tooltip inside interactive tooltip

[Wyzix33]

I have a situation where i need a user to select something from the tooltip of a tooltip, and i want to keep the first tooltip open when the user clicks inside the second tooltip :)

Here's a pen using tippyjs v5 👍 :

https://codepen.io/wyzix33/pen/bPyMdL

I tried using hideOnClick: false and it kind of works, i've made the logic to hide it if click is outside any of the tooltips, but i'm wandering if it will be better when using interactive tooltips to keep them all open when click is inside any of the tooltips.

Or maybe there is a better solution i'm not seeing it...

Thanks

[atomiks]

This (and especially hovering instead of clicking regarding interactive nested popovers) is kind of a missing piece of this lib right now. It needs a good API/solution that I haven't thought of yet. Custom logic seems like the right idea for now.

[atomiks]

So this actually works properly in v5 now due to the default appendTo: "parent" behavior.

However, sub-tippys:

• The width can be messed up: due to the max-width: calc(100% - 5px) on .tippy-popper (for small viewport widths) its width matches the width of the subpopper
• Can be cut off: when arrow: false, overflow: hidden cuts it off when there is no arrow.

I'll see how these can be fixed in a backwards-compatible manner.

---

You can fix these yourself right now, like:

// Sub-tippys (which can also act as "main" tippys with further nesting)
tippy(nestedReference, {
  onCreate(instance) {
    // Need to see how that affects small viewport widths
    instance.popper.style.maxWidth = 'none';
    instance.popperChildren.tooltip.style.overflow = 'visible';
  }
});

// Top level tippy
tippy(reference, {
  content: menuWithNestedReferences,
  arrow: false,
  onCreate(instance) {
    // Due to `arrow: false` - this is not necessary unless you have `animateFill: true`
    instance.popperChildren.tooltip.style.overflow = 'visible';
  }
});

[atomiks]

Another problem is the "hit target" area for hover menus. Starting from the cursor point, an imaginary triangle is formed from it to the tippy where the tippy won't hide.

This will be the most complex part to get right, I made some rough draft:

Also this would probably be a plugin since it would add a lot of code, and require this? https://stackoverflow.com/questions/2049582/how-to-determine-if-a-point-is-in-a-2d-triangle

interactiveBorder is effectively a simplified version of this, and nowhere near as good for UX.

[atomiks]

This should be properly supported now in 5.0.3

• Interactive tippies need to be appended in a nested fashion within each popper (this is default behavior) - or it won't work.
• Interactive tippies' width is based on the parent tippy's width. You need to explicitly set sub/nested tippies' .tippy-popper width if you want it to be wider.