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

*** Update: Within 15 minutes of posting, I came up with a way to make the code accessible and have the html validate. I will leave this post here so that you can see the evolution of my changes (and thinking).

Both of the objections below should be resolved with the new code.

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"
name="yahoo.htm?width=175&link=yahoo&name=Before
You Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

Demonstration of my code

Objection: Doesn’t validate

I’ll bring this up so someone else doesn’t need to. Checking validator.w3.org indicates that even my newer version of the code doesn’t validate.

Some of you will choose the benefits of this tooltip over strict validation. Other of you won’t. Your choice is your choice and I’m not one to tell you you’re wrong or right.

Objection: Strange 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 compounded the issue by adding a variable called name to the information found in the name of the link.

Lame excuse: I chose speed over perfection. I wanted to get this tutorial wrapped up because it was way over due (in my mind) and with other things on my plate, I decided not to aim for supreme perfection.

Perhaps I’ll rewrite the code in the coming days.

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]