jQuery工具提示是口吃

Question

图像有时可以比单词更好地解释。

所以我自编的jquery工具提示有一个非常奇怪的问题（我实际上想避免使用一些lib，因为我的用例实际上非常简单，我不需要一些膨胀的lib）。

当我从右向左或从上到下移动鼠标时，一切都很好。当我从左到右或从下到上移动鼠标时，我的工具提示会出现口吃 - 请参阅gif。

我的工具提示由数据属性引用

<a href="#" data-tooltip="#myTooltip">HOVER ME</a>
<div id="myTooltip">Tooltip Content Foo Bar</div>

为了避免问题定位我的元素，我将稍后将jQuery移动到正文。

好吧，现在我已经知道我的工具提示是怎么回事了。有什么想法为什么是口吃？ BTW：对于我来说，这种情况在所有现代浏览器中都有发生。

$(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();
        });
    });

});

Answer 1

我想我找到了适合你的解决方案。可能不是你想要的，但我认为它适用于你想要用它的东西。

这是JSfiddle：http://jsfiddle.net/nj1hxq47/3/

好的关键是要确保鼠标永远不会越过你正在拖动的元素。因此，确保在拖动的元素和悬停的元素之间至少有1 xp，这样可以确保它不会触发onleavemouse事件。

var yPos = e.pageY + 5;

我确信有更好的方法可以做到这一点......但我希望这会有所帮助。

编辑：主要问题是鼠标正在移动到移动到鼠标位置的元素，从而触发onmouseleave事件，导致元素被隐藏并以毫秒为单位显示。因为鼠标离开事件在移动之前触发。