Prevent bubbling for tooltips of nested elements

[tilonorrinco]

Hello!
In my project there are two nested divs: one inside another. Each div has its own tooltip.
The problem is: when I hover nested div, there are two tooltips: one of hovered div and other -- of its parent due to event bubbling. How can I prevent such behavior? The result I try to get: hovering nested div there should be only one tooltip: the tooltip of this div. Here you can see the example of problem:
https://codesandbox.io/s/6y6k0kl1lw
Thank you!

[atomiks]

You can control the functionality of tooltips with custom logic. So while there's not (that I can think of) a declarative/automatic solution that the library does, you can always do it yourself.

In particular, you can make the parent listen for mouseoff and hide the tooltip. However, you'll might need to account for legitimate children of the parent who don't have a tooltip.

Let me know if this works.

parent.addEventListener('mouseout', e => {
  if (e.target._tippy) {
    parent._tippy.hide()
  }
})

[KABBOUCHI]

https://codesandbox.io/s/74x60rz3wq

[tilonorrinco]

Thanks a lot, it works!

[atomiks]

Ha yeah, mouseout not mouseoff 🤣