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.

The one big issue I had when I looked at the html source has to do with accessibility – links not working if javascript is turned off. I’m not inclined to look at all javascript through the accessibility prism, but it just seemed to me that there could be another way to create the same effect in a slightly better way.

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.

So what I’ve got for you today is a minor modification of Cody’s script. If you’re not a fan of his tooltips, then my rendition probably won’t wow you either. But if you like what he’s done and want links that will still work with javascript turned off, well this might just be right up your alley.

My Changes

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&amp;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>

Demonstration of my code

Improvement: HTML Validates

My new code validates, according to w3.org

Improvement: Naming

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.

Improvement: Usability

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.

Hat Tip

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.

Enjoy.

[tags]javascript, tooltip, Cody Lindley, jQuery, accesibility[/tags]