Simple Tooltips


I wanted a tooltip implementation for my web page, and was looking around. I looked a number of open-source options (see 40 tooltip scripts here and 20 here) and one commercial library. I liked the functionality however each of them was 7, 8, 10 or 25 KB in size, which I thought was too much to implement just a simple tooltip. So, I thought how about I write a tooltip library myself.

Here is an implementation, check it out at I implemented this in 818 bytes of code, and about an hour of coding. So one would think, there must be something wrong. Well, it works. And is cool!


5 Responses to “Simple Tooltips”

  1. 1 Simon

    Love this. Exactly what I was trying to find.

    Nice job 🙂

  2. it very nice =)

  3. Works nicely, but it took me a little bit to figure out that I needed the css for the tooltip div as well. You should go ahead and link that next to the js, or just put style=”display:none; position:absolute;left:0px;top:0px;” in the example code.

  4. Nice & simple !

    Does not conflict with the “prototype.js” script (as did my other solution, using the jQuery script), although my “Flickr Badge” (running on prototype) shows over the tooltip if this one opens too close (?).

    Would there be a way to have the tooltip over a link using, for instance, the “rel” attribute ?

    Also, I haven’t tried yet, does it work when moving the mouse over an image () ?

    In any case, thank you very much !

  1. 1 My List: CSS Tooltips / Ajax Tooltips | David Bisset: Web Designer, Coder, Wordpress Guru

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: