Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Prevent parent tooltip when hovering child with own tooltip

Hi! Given the following HTML:

<li class="thumbnail" title="Foo Thumbnail">
  <button class="upgrade" title="Upgrade">Upgrade</button>

I have a tooltip for both the li and button elements. When hovering with the mouse of the button, both tooltips for the li and the button are displayed because I assume the mouseenter event bubbles up. Is it possible to prevent this?


  • edited August 2016

    Even if you'd prevent a bubble up of mouseenter on the child, to reach that child element you'd first have to mouseenter the parent, which shows its tooltip. So blocking the bubbling wouldn't do anything.

    This kind of nested setup isn't ideal when it comes to events with tooltips.

    You can work around it by stacking the elements with css inside a parent container. You can make them siblings that way and avoid the nesting. There's no need to think about event bubbling that way since there isn't any. You'd only see a tooltip for the element the mouse is on.

Sign In or Register to comment.