Hide qTip, wenn außerhalb des Bereichs mit Ziel

Question

Ich würde gerne zeigen die qtip nur auf Mouseover das Ziel (<span class="percent100">), aber ich möchte sichtbar bleiben, bis ich die Maus außerhalb der allgemeinen containing-Element (<div class="profileArea") bewegen. Hier ist, was ich versucht habe, aber es funktioniert nicht.

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

Sie müssen wie etwas auszuführen: 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 
       } 
      } 
     } 
    }); 
}); 

Überprüfen Sie, ob geöffnet QTIP halten, wenn Sie über roten Blöcke sind.