qTip2 - My test case

by araque

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="box"><a href="#" title="testing container issues">test</a></div>

CSS

body{
    padding: 50px;
}
#box{
    width: 200px;
    height: 200px;
    background-color: #eee;
    margin: 20px;
    overflow: hidden;
    position: relative;
    float: left;
}
a {        
    margin: 0;
    margin-top: 50px;
    float: left;
}

JavaScript

// Create the tooltips only when document ready
$(document).ready(function() {
    $('a').qtip({
        position: {
            container: $('#box'),
            my: 'bottom center',
            at: 'top center'
        }
    });
});