I just added jquery tipsy plug-in to my site and I cant seem to get it working properly! It fades in just fine and the html works fine, but the delay doesn't happen. Here is the code I am using:
$(document).ready(function() {
$('#navi li a').tipsy({delayIn: 500, fade: true, html: true});
})
Has anyone ever encountered this problem? A link to the page here: failing demo
If you read the Matt Wiz's website's source code, you'll notice the technique he used. The options he used for tipsy is
$('a.yes').tipsy({delayIn: 500, title: 'rel', fade: true, html: true});
And the HTML
<a rel="<b>In This Section</b><br/><br/>
We have plenty of ways you can help our cause!
Check out this page for more information about how you can help
<span style="font-weight:bold;color:#ff6600">The Change Exchange</span> in our endeavors."
id="howcanihelp" href="http://setarecord.com/tce/how-can-i-help/" class="yes"
style="background-position: 0px 0px;" original-title="">
<span>How Can I Help?</span><span class="hover" style="top: 53px;"></span></a>
It's ugly as sin, terribly unpleasant to read (note: the original code did not have all these line spacing) and on top of all that, its horribly invalid HTML. Just don't do this. There are other jQuery tooltip plugins that allow you to do this without having to stick all your HTML data into an attribute, alright?