qTip2 - My test case

by robaldred

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">
<p><a id="test" href="#test" title="Tooltip text">Sample link</a></p>
<p><a id="test2" href="#test" title="Tooltip text">Sample link</a></p>
<p><a id="test3" href="#test" title="Tooltip text">Sample link</a></p>

CSS

body{
    padding: 50px;
}

JavaScript

// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a#test').qtip(
     {
         position: {
             my: 'bottom right',
             at: 'top center'
         },
         style: {
             width: 135,
             height: 19
         }
     });
     
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a#test2').qtip(
     {
         position: {
             my: 'bottom center',
             at: 'top center'
         },
         style: {
             width: 135,
             height: 19
         }
     });
     
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a#test3').qtip(
     {
         position: {
             my: 'bottom left',
             at: 'top center'
         },
         style: {
             width: 135,
             height: 19
         }
     });
 });