December 18 2007
jQuery Tool Tips, For & By a Javascript Noob
I’ve recently been using, and falling in love with, a Javascript library you’ve probably heard of - jQuery. So when I needed Tool Tip functionality for a project, the one thing I was sure about was that jQuery was the way to go. I tried writing some things myself and didn’t like the results. Then I tried a couple of different jQuery based Tool Tip plugins, which worked OK, but I knew they were cumbersome & supurfulous.
I planned on coming back & giving them another go myself, all I needed was a little motivation. Apple’s Final Cut Studio 2 site (found via Jody Ferry’s delicious links) provided just the amount of motivation I needed. Comparatively mine looks like ass, but you get the idea.
Screenshot of the Tool Tip in action:
(view the live example)
So from one Javascript noob to another Tool Tips using jQuery are so easy, it’ll knock your socks off!
If you haven’t already, you should also dive into the jQuery tutorials, you’ll never consider one of those inferior Javascript libraries again.
Update: In all my jQuery excitement, I overlooked the fact that if you didn’t want your Tool Tips to animate, there’s no need for any Javascript at all! I added some commented out CSS in the live example, should you prefer the non-Javascript route.
2 Comments
jode // December 19 2007
Sweet tips! Your example doesn’t degrade very well with styles turned off….words bleed together into mumbled nonsense. Is there a solution that doesn’t F with the content flow? What IS a tool tip, from a semantics perspective?
Bill // December 19 2007
Yeah, it’s a good suggestion and is doable, I’m sure. The thing I’m worried about - is that the link around an open Tool Tip will no longer be available, resulting in the Tool Tip closing when the user takes their mouse off the link text.
I’m sure someone who knows what they’re doing can improve this in several ways.
In the project I’m using them for, the Tool Tips are glossary terms, which unfortunately can’t be marked up with definition lists, as the Tool Tip content needs to reside within an anchor.
Doh! Looks like I’m at square one.