在動態加載內容時取消jQuery工具提示

Question

我正在使用jQuery工具提示來顯示動態加載的內容（下面的JavaScript）。在某些情況下，當鼠標遠離元素時，工具提示不會消失。我的理論是動態內容的加載引入了一個小小的延遲，所以鼠標在工具提示函數完成之前就離開了元素，所以它不會消​​耗mouseleave事件。任何方式來解決這個問題？

element.tooltip(
     { 
      items: "table.orderlist label", 
      open: function (event, ui) 
      { 
       ui.tooltip.css("max-width", "600px"); 
       ui.tooltip.css("max-height", "300px"); 
       ui.tooltip.css("overflow", "hidden"); 
      }, 
      content: function (callback) 
      { 
       //Get the contents as the tooltip is popping up 
       MyAjaxCall(iID, 
        function (result) 
        { 
         try 
         { 
          //success 
          callback(result) //returns the result 
         } 
         catch (e) 
         { 
          DisplayError(e); 
         } 
        }, 
        function (result) 
        { 
         //Error 
         DisplayError(result); 
        }); 
      } 
     }); 

Answer 1

你的內容的功能應該是一個比較複雜一點，可能的解決方案是：

content: function (callback) 
{  
    var $this = $(this), isMouseOn = true; 
    // check if tooltip ajax-request is in progress 
    // really needed for slow scripts only 
    if($this.data('tt-busy')) return; 
    // check if el is hovered (in jquery <= 1.8 you can simly use .is(':hover') 
    $this 
     .data('tt-busy', true) 
     .on('mouseenter.xxx', function() { isMouseOn = true; }) 
     .on('mouseleave.xxx', function() { isMouseOn = false; }); 
    // 
    $.get('slow.script', function(d) { 
     if(isMouseOn) callback(d); 
    }).always(function() { 
     // even if result fails set loading var to false and unbind hover events 
     $this 
      .data('tt-busy', false) 
      .off('.xxx'); 
    }); 
}