jQuery UI tooltip above a hoverable element

Question

I want a tooltip for an element (#hastitle) inside another element (#hover). The latter stops event propagation and does something on mouseover/mouseout.

jsfiddle example

html:

<div id="hover">
    <div id="hastitle" title="bar">fu</div>
</div>

js:

$('#hover').on('mouseover mouseout', function (e) {
    e.stopPropagation();
    $(this)[e.type == 'mouseover' ? 'addClass' : 'removeClass']('hover');
});
$(document).tooltip({
    tooltipClass: 'tip'
});

Why does the tooltip not work?

Also for a solution: I'm not sure whether I want to call e.stopPropagation() on mouseover/mouseout for the element with the tooltip (#hover) yet. So a solution that works for both cases would be very much appreciated.

Answer 1

Since the widget is initialized on document, the widget's event listeners will be attached to it. If we prevent event propagation it won't reach the handlers attached with document.

Simply allowing the event propagation seems to fix the issue for me.

Updated Fiddle

---

If you must prevent event from propagating further #hover, You can initialize the widget on it rather than document:

$('#hover').on('mouseover mouseout', function(e) {
  e.stopPropagation();
  $(this).toggleClass('hover', e.type == 'mouseover');
});

$("#hover").tooltip({
  tooltipClass: 'tip'
});

#hover,
#hastitle {
  padding: 25px;
}
#hover {
  background-color: blue;
}
#hover.hover {
  background-color: orange;
}
#hastitle {
  background-color: green;
}
.tip {
  background-color: red;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="hover">
  <div id="hastitle" title="bar">fu</div>
</div>