Note: This is an update to my original post, which can be seen here: jQuery Tooltips
Cody Lindley, author of Thickbox, recently released jTip – The jQuery Tooltip.
I really like some of the extra bells and whistles that these tooltips provide. I’m sure that there are those among you that think there’s no need for yet another tooltip – but I can see some exciting applications for Cody’s idea in my own work.
Specifically, I didn’t like the idea of sacrificing the usability of a true link to another page for the benefit of the tooltip on hover. I love the tooltip – and no disrespect to Cody – but for the application I’m considering I need that link to work no matter what.
The link that really got me thinking about tinkering with his code a bit was the one for yahoo. It leads to an external site (Yahoo), has a great little tooltip on mouseover, but I just didn’t like this code he used to create it:
<a href="yahoo.htm?width=175&link=http://www.yahoo.com" name="Before You Click..." id="yahooCopy" class="jTip"> Go To Yahoo</a>
So I rewired some of his script and now the same effect can be achieved like so:
<a href="http://www.yahoo.com" rel="yahoo.htm?width=175&link=yahoo&name=Before%20 %20You%20Click..." id="yahooCopy" class="jTip"> Go To Yahoo</a>
Improvement: HTML Validates
My new code validates, according to w3.org
As I was going through the code, making some small changes, I noticed that Cody used a variable called ‘title’ that was assigned the value found in the name of the link. This could be a bit confusing.
I addressed the naming issue, even though I think it’s of little importance.
With my code, you can choose to have each tooltip a genuine link to another document, internal or external. Or, if you just want the tooltip and don’t care about usability, you can choose to leave the link out of the equation.
The choice is yours.
Cody came up with a great concept and saved me tons of time by doing the heavy lifting. My modification is in no way a criticism – just a slight “tweak” that I thought my readers might appreciate.