qTip2 - My test case

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<div id="block" class="safe"></div>
<div id="block" class="safe"></div>
<div id="block" class="safe"></div>

<a href="#test" class="left" title="Tooltip text">Sample link</a>

CSS

body{
    padding: 50px;
}

#block{
    float: left;
    margin: 20px;
    
    background: red;
    width: 50px;
    height: 50px;
}

.left {
    position: absolute;
    left:20px;
}

JavaScript

// 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
                }
            }
        }
    });
});