JavaScript tooltip

I have this little javascript related issue that appears in front of me every few weeks: how to do a really good javascript based tooltips? Well some time ago this issue came up in a project that I was pulled into to fix some hard core front end bugs. Right away I thought to myself: wow, great chance to finally tackle the issue and put it behind me.

My plan was to do a little bit of research and check out if anyone had done it before me and the outcome will fill all my needs and if not, write javascript tooltip by myself. The biggest requirement was that it needs to be framework/library independent meaning pure old school javascript. Another requirement was default good look and feel and the final requirement was clear, easy to modify code.

So I went for a search and came up with this little piece of tooltip goodness. People over at Six Revisions presented a tutorial by Michael Leigeber in which a step by step solution to creating exactly what I need is presented. Great thing about it that at the end you end up with just what I needed in a form of out of the box working solution.

And how good is the tooltip? Well, to quote Seb, a fellow Cognifide developer, deeply in love with Flex, tooltips made with this script are “so sexy”. It doesn’t get much better than Seb not flaming a javascript creation.

And to address most important issue - flexibility and possibilities to code modification here is a list of what we were able to do with the tooltip script:

• change orientation - originally tooltip is on the right side of the mouse pointer, this had to change for right-to-left text orientation sites and doing so was a breeze
• change open/close triggers - default is onMouseOver used for showing the toolbar and onMouseOut for hiding it, our requirements needed that to change and it was done quite easy
• change position and mouse trailing - this was a bit tricky: instead of tooltip following mouse pointer when showed it had to stick to one position with some help of js-voodoo this took less than an hour of work
• change look and feel - all is CSS driven so changing the appearance of the tooltip also was quite easy.

Hopefully this little solution will feel all my needs for valid javascript based tooltip. As you can see it is pretty cool and flexible and I will definitely will (re)use it in the future.

Big shout goes to the guys from Six Reviews and Michael Leigeber for this tutorial. Thanks!