图像有时比单词能解释得更好。
因此，我的自写jquery工具提示存在一个非常奇怪的问题（我实际上想避免使用某些lib，因为我的用例实际上非常简单，这里不需要一些some肿的lib）。
当我从右到左或从上到下移动鼠标时，一切都很好。当我从左到右或从下到上移动鼠标时，工具提示变得口吃-请参阅gif。
数据属性引用了我的工具提示
<a href="#" data-tooltip="#myTooltip">HOVER ME</a>
<div id="myTooltip">Tooltip Content Foo Bar</div>
为了避免在定位元素时出现问题，我稍后将其与jQuery一起移至正文。
好了，现在我已经知道了我的工具提示是怎么回事。有什么想法为什么会口吃？
顺便说一句：对我来说，这在所有现代浏览器中都在发生。
$(function () {
$('[data-tooltip]').each(function () {
$($(this).data('tooltip')).appendTo('body');
// this mouseenter listener could be safely removed, probably
// (don't forget to move the display:block part to mousemove tho)
$(this).on('mouseenter', function (e) {
$($(this).data('tooltip')).css({
display: 'block',
left: e.pageX,
top: e.pageY
});
});
$(this).on('mousemove', function (e) {
$($(this).data('tooltip')).css({
left: e.pageX,
top: e.pageY
});
});
$(this).on('mouseleave', function () {
$($(this).data('tooltip')).hide();
});
});
});
最佳答案
我想我为您找到了解决方案。可能不是您真正想要的东西，但我认为它将对您想要使用的东西起作用。
这是JSfiddle：http://jsfiddle.net/nj1hxq47/3/
好吧，关键是确保鼠标永远不会移到要拖动的元素上。因此，确保要拖动的元素和悬停的元素之间至少有1 xp，将确保它不会触发onleavemouse事件。
var yPos = e.pageY + 5;
我相信有更好的方法可以做到这一点...但是我希望这会有所帮助。
编辑：主要问题是鼠标移过要移动到鼠标位置的元素，从而触发onmouseleave事件，导致元素被隐藏并以毫秒为单位显示。因为鼠标离开事件在移动之前触发。
关于javascript - jQuery工具提示口吃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34119683/