在包含目标的区域之外隐藏qTip

Question

我想仅在鼠标悬停目标时显示qtip（<span class="percent100">），但我希望保持可见状态，直到将鼠标移动到包含常规元素（<div class="profileArea"）之外。这是我试过的，但它不起作用。

HTML：

//other HTML 

//don't hide tooltip if anywhere in this div 
<div class="profileArea"> 
    <span class="profileInner">Your Profile: 0 
     <span class="fullProfileBar"> 
      <span class="completedProfileBar"></span> 
     </span> 
     //start showing when hover over this span 
     <span class="percent100"> 100%</span> 
    </span> 
</div> 

//other HTML 

的Javascript：

$('.percent100').qtip({ 
    id: 'progressBarTooltip', 
    content: { 
     text: 'Text Here' 
    }, 
    position: { 
      my: 'top right', 
      at: 'bottom right', 
      target: $('.percent100') 
    }, 
    show: { 
     event: 'mouseover' //shows when hover .percent100 
    }, 
    hide: { 
     fixed: true, 
     //trying to hide when leave 
     target: $("div[class!='profileArea']") 
    }, 
}); 

Answer 1

您需要执行类似： http://jsfiddle.net/78zmG/2/

// Create the tooltips only when document ready 
$(document).ready(function() { 
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!! 
    $('a').qtip({ 
     hide: { 
      delay: 400 
     }, 
     events: { 
      render: function(event, api) { 
       // All elements with class 'safe' will set the 'safe' flag in the API cache 
       $(document.body).delegate('.safe', 'mouseenter mouseleave', function(event) { 
        api.cache.safe = event.type === 'mouseenter'; 

        // This will hide the tooltip if we mouse out of the "safe" elements 
        if(!api.cache.safe) { api.hide(event); } 
       }); 
      }, 
      hide: function(event, api) { 
       // Check we're currently on a "safe" element, and stop the hide if so 
       if(api.cache.safe) { 
        try { event.preventDefault(); } 
        catch (e) {} // Needed for old IE and jQuery versions 
       } 
      } 
     } 
    }); 
}); 

检查qtip保持打开时，你是在红色块。