快速移动的鼠标永远不会触发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="https://stackoverflow.com/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”类的按钮添加提示，但移动鼠标事件触发太快。

任何人有关于如何解决这个问题的一些提示？

Answer 1

'如果鼠标未进入工具提示（工具提示出现在鼠标下方），则浏览器可能不会触发mouseleave事件。你可能想要添加一个额外的选择器。试试这个：

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

我会强烈建议虽然去除你的提示方法的HTML ...尝试创建一个空的div，当你去显示它添加提示文本和定位 - 尽量少添加到DOM尽可能（为大多数工具提示HTML创建一个隐藏的div，并且只根据需要更改它的实际文本内容）。

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