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

Question

我想仅在将鼠标悬停在目标 ( <span class="percent100">) 上时显示 qtip，但我希望在将鼠标移到一般包含元素 ( <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 是否保持打开状态。