快速移動的鼠標永遠不會觸發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中刪除，以後再創建和添加）。