快速移动鼠标不会触发mouseleave事件。

Question

当鼠标悬停在网站上的某些按钮上时，我希望出现提示工具，以便向用户提供说明。基本上，当鼠标悬停在具有“has_tooltip”类的按钮上时，会附加一个提示工具。

$('.has_tooltip').live({
    mouseenter  : function(e) {
        if($('#tooltip_container').length > 0){
            $('#tooltip_container').remove();
        }

        var $t = $(this), text = $t.attr('rel'), left = e.pageX-25, top = e.pageY-25;
        if($t.attr('rev') === '1') {
            text += ' <span class="tooltip_warning">You must be <a href="/users/login" class="modal-dynamic">logged in</a> to make use of this.</span>'
        }
        $tooltip = $('<div id="tooltip_container">'+text+'</div>');
        $('body').prepend($tooltip);

        $tooltip.css({
            left: left+'px',
            top: top+'px'
        });

    },

});

当用户的光标离开新创建的工具提示框时，它应该消失。

$('#tooltip_container').live({
    mouseleave : function(e){
        $(this).remove();
    }

});

然而，快速移动鼠标到一个带有“has_tooltip”类的按钮上会添加工具提示，但移动太快了，无法触发mouseleave事件。有没有人有一些提示可以帮我解决这个问题？

- Adam Templeton

Answer 1

如果鼠标没有进入工具提示框（工具提示框出现在鼠标下方），浏览器可能不会触发鼠标离开事件。你可能需要添加额外的选择器。尝试如下所示:

$('#tooltip_container','.has_tooltip').live({
    mouseleave : function(e){
        $('#tooltip_container').remove();
    }
});

我强烈建议在您的工具提示方法中删除HTML...尝试创建一个空的div，添加工具提示文本并在显示时进行定位- 尽可能添加最少的DOM内容（为大多数工具提示HTML创建一个隐藏的div，并仅根据需要更改其实际文本内容）。

理想情况下，您的mouseenter应该简单地替换工具提示文本并显示正确定位的div。mouseleave事件应该只是隐藏（hide()）工具提示的div（不要将其从DOM中删除，以便稍后再次创建和添加）。

- Joe Johnson