ToolTip in HTML Page Using JavaScript

Sometimes we think at very high level for a problem and we forget there is a easy way out there.

The same thing happened to me in one of my project. Client was crazy, they wanted each and every damn fancy thing on a single html page. One of the requirement was to provide tooltip. If user does a mouseover to some particular location a fancy tooltip should appear with some dynamic details, hummm wait...they didn't want the simple tooltip provided by html, they wanted it to be full of color/graphic/fonts/etc and lots of dynamic content produced by the jsp.

We first decided to use a very popular free javascript library available(won't name it), it was working fine and giving desired output but after sometime we found that it was eating up lots of memory and after some ajax call it was making page almost hanged.

We decided to replace this tooltip...So I was googling on the internet and found some code...and suddenly a thought came into my mind, why can't we implement it in a simpler way. I tried that...and it worked too. Tooltip functionality provided by me was working fine and giving exact the same look and feel and content as of previous, in addition to that the major advantage was when previous tooltip implementation used to create 100s of HTML object and making html page slower; the newer one was creating only one DIV html object.

Wondering how ??? Click here to see the sample tooltip. Click here to get the tooltip code.