콘텐츠 동적로드 중 jquery 툴팁 취소

Question

동적으로로드 된 콘텐츠 (아래 javascript)를 표시하려면 jQuery 툴팁을 사용하고 있습니다. 마우스가 요소에서 멀어지면 툴팁이 사라지지 않는 경우도 있습니다. 필자의 이론은 동적 인 내용을로드하면 약간의 지연이 생겨 툴팁 기능이 완료되기 직전에 마우스가 요소에서 멀어 지므로 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'); 
    }); 
}