javascript - jQuery 工具提示卡顿

Question

有时图片比文字更能说明问题。

所以我自己编写的 jquery 工具提示有一个非常奇怪的问题(我实际上想避免使用一些库，因为我的用例实际上非常简单，我不需要一些臃肿的库)。

当我从右到左或从上到下移动鼠标时，一切正常。当我从左到右或从下到上移动鼠标时，我的工具提示变得断断续续 - 请参见 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();
        });
    });

});

Answer 1

我想我找到了适合您的解决方案。可能不是您真正想要的，但我认为它可以满足您的使用需求。

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

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

var yPos = e.pageY + 5;

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

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