The qtip is supposed to be pointing to the top left of the word, Terms. Instead it's pointing to the bottom left:
The bad tooltip also flickers, though I suspect that's because the tooltip is placed over the target.
But right next to it, set up in the same way, the word Delivery has it's tooltip correctly placed at the top left of the target:
And if I reorder the display without changing anything else, the tooltip moves to its proper place:
The bad tooltip also flickers, though I suspect that's because the tooltip is placed over the target.
Here is the html table visible in the screenshot:
<table style='width:690px;text-align:center;'><tr>
<td style='width:200px;text-align:center;'><span class='tooltipAbove' title='Call us at xxx/xxx-xxx and we will set you up.'>Refund</span> • <span class='tooltipAbove' title='Information entered is only used to fulfill this order.<br/>It is never shared with anyone. Period.'>Privacy</span></td>
<td id="copyright">© 2012 Ten Sigma. All Rights Reserved.</td>
<td style='width:200px;text-align:center;'>
<span class='tooltipAbove' title='This product is activated using our website<br/>at http://TenSigma.org'>Delivery</span>
•
<span class='tooltipAbove' title='If you do not wish to pay immediately by credit card,<br/>please contact us at xxx/xxx-xxxx and we will work something out.'>Terms</span>
</td>
</tr></table>
(Be quiet. I like to make it look good and move the styles to class later.)
Here is how the qTip is activated:
$('.tooltipAbove[title]').qtip({
position: {
my: 'bottom left',
at: 'top left'
}
});
}
Any thoughts?