Question

我想要一个元素（#hastitle）的工具提示在另一个元素（#hover）中。后者会停止事件传播，并在鼠标悬停/鼠标移动时执行某些操作。

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：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery UI工具提示位于可暂停元素之上

1 个答案: