UPDATE: I’ve made a couple of changes to the script to make it easier to use and there’s now a demo available.
A few weeks back I was looking for a nice simple way of adding tooltips to some buttons on a site – sometimes an image alone doesn’t quite convey what the button does in enough detail.
I found the excellent coda popup bubbles on jQuery for designers, this seemed to do everything I wanted it to, but it meant going through all of my html and adding an additional div with the popup content. That’s fine for me, but other developers are never going to remember to do this and we really want a consistent user interface.
A little bit more looking led to Web Designer Wall (#5 in the list). They have a very simple technique that 
pulls the Title text from an image and creates the popup out of this. All of dev’s are told to add title text to images so this was almost perfect. I say almost perfect because unlike the code bubbles the hover events queue up. This means that if you run you cursor back and forth over the buttons the popups keep firing for a few seconds/minutes after you stop.
So my final stop was to combine the two. I also incorporated any fixes I saw in the comments 
section of jQuery for Designers.
You can download the script here.
Or see a demo here.
The image file I use for the tooltips can be downloaded here, and is free for anyone to use.
[ad]
7 replies on “Very simple Jquery tooltips”
Any demo?
And your categories link are broken.
Interesting way! Have you a demo of your tooltip? How would the html-structure looke like?
This is awesome, thank you so much for sharing the code.
I have a question though, how could I make the pop up stick after landing on the page it links to? In simple terms once I’m on the page I wanted to go to (after clicking the menu button) I would like the pop up to stay displayed under that particual selection only.
You have to excuse me though I know absolutely nothing about JQuery, CSS is my forte.
Cheers!
I don’t have a demo up yet. I’ll try and get one posted up this week.
Thanks for the heads-up. All of the links should be working, and I’ll try and get a demo up this week.
Care to elaborate for us newbie’s to jquery? What html and css did you pull from each of those other plugins that is required to make it popup?
Joel. I’ve made some minor updates to the script, and added a demo to the site now for the tooltips – take a look at the source for the css. I’ve also made the image file that I use available for free download.