CODEWITHSUNDEEP
jqueryjquery-uitooltipjquery-ui-tooltip
IARI
IARI

Reputation: 1377

jQuery UI tooltip above a hoverable element

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.

Upvotes: 0

Views: 495

Answers (1)

T J
T J

Reputation: 43156

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>

Upvotes: 1

Related Questions