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">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id="dialog">
    <table border="1" align="center" width="100%">
        <tr>
            <td width="50%">
                <br />
            </td>
            <td id="td" title="looonnnnng tooltip text" width="50%">
                <span id="target">Sample link</span>
            </td>
        </tr>
    </table>
</div>

CSS

body{
    padding: 50px;
}

td {
    height:280px;
}

JavaScript

$(document).ready(function() {
    $('#dialog').dialog({
        height: 250,
        width: 300,
     });
     
     $('#td').qtip({
        position: {
            target: $('#target'),
            my: 'bottom center',
            at: 'top center',
            container: $('#dialog'),
            adjust: {
                method: 'shift flip'
            }
        }
         
        
     });
 });