可悬停元素上方的 jQuery UI 工具提示

Question

我想要另一个元素 (#hover) 中的元素 (#hastitle) 的工具提示。 后者停止事件传播并在 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'
});

为什么工具提示不起作用？

还有一个解决方案：我不确定是否要在 mouseover/mouseout 上为带有工具提示 (#hover) 的元素调用 e.stopPropagation()。 因此，我们将非常感谢对这两种情况都适用的解决方案。

Answer 1

由于小部件在document 上初始化，小部件的事件侦听器将附加到它。如果我们阻止事件传播，它将无法到达以document 附加的处理程序。

简单地允许事件传播似乎可以解决我的问题。

Updated Fiddle

---

如果您必须阻止事件进一步传播#hover，您可以在其上初始化小部件而不是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>