stunicholls.com

...exploring the possibilities

jQuery 'TopTip' tooltips

17th November 2008

Vincent Van Gogh

Gogh, Vincent (Willem) van, generally considered the greatest Dutch painter and draughtsman after Rembrandt.

With Cézanne and Gauguin the greatest of Post-Impressionist artists. He powerfully influenced the current of Expressionism in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known The Starry Night (1889).

This text is an excerpt from The WebMuseum, Paris

jQuery Dimensions Plugin 1.1

Information

I know that everybody and his dog have done tooltips, but as I am still getting to grips with the working of jQuery I thought that it might be a good thing to tackle. So I bring you 'TopTip' tooltips.

This one is a 'split' method between jQuery and CSS. The jQuery bit does the screen positioning and tries its best to place the tooltip on screen if possible. It starts with the default position of bottom right, and follows the mouse position. If there is not enough room for the tooltip in this position then it will move left and/or up.

The tooltip information is held in divs on the same page, so no calling other files, and the tooltip can be applied to ANY element on the page.

All that is needed is to add two classes to the tooltip element 'toptip' and a unique class. The unique class is then used by jQuery to display a div with the same id.

CSS then takes over to style the tooltip class and the corresponding tooltip id.

So the look of the tooltip is entirely up to you. This can be as simple or complex as you like. Finally, because of the use of classes for the tooltip element, you can have the same tooltip applied to as many elements as you like.

Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

You will need a copy of jQuery and jQuery Dimensions Plugin 1.1 to be able to use this demonstration.

If you would like a copy of this demo then please email me and make a donation to support stunicholls.com, every little helps to keep this site up and running.