You've probably visited sites where you roll your mouse over an element and a small popup box displays with added information without the page needing to be reloaded or an external window needing to be launched. This feature is called a tooltip.
The following are some examples of how you can use tooltips on your site to improve usability and a couple of ideas that may also be beneficial in marketing and ecommerce aspects. You might be surprised what can be achieved with a tooltip script!
Roll your mouse over "Define" at the end of this sentence to view the tooltip. (Define)
This form of implementation can be used for glossaries or simple descriptions. Here's another example:
If you have complex forms on your site; instead of linking to a separate page with instructions or clarifications, or using a chromeless popup window; you could use tooltips to explain what is required for various form elements.
Image thumbnail applications
Instead of needing to open a new window to view larger versions of thumbnail images, you can use some tooltip scripts for display purposes. Tooltips can also be used for displaying added information about an image.
If you have a page on your site containing testimonials from your clients, including pictures, or perhaps testimonials scattered throughout your pages, here's a tooltip related idea:
Ecommerce and affiliate marketing
If space is tight, you can use a mixture of the above methods for ecommerce and affiliate marketing purposes. For example, an affiliate could do something like this:
A merchant site could do the same sort of thing, except instead of affiliate links, use "buy now" or "add to cart" links.
Free tooltip scripts
After testing half a dozen free scripts the one I've settled on and used for all the above examples is BoxOver. It's lightweight, cross-browser compatible and best of all, so simple to use. All you need to do is to download and import the .js script into your web; add a script path statement either in the <head> or <body> of your pages and then create your tooltips like so:
<span title="header=[h text] body=[b text]">T Text</span>
The "h text" you replace with what you wish to appear in the header cell and "b text" should be replaced with the text you wish to appear in the cell beneath it. The "T Text" is the trigger item that will generate the tooltip popup - this can be just text or an image. You can also use HTML in "h text" and "b text"
Handy tip: when using tooltips containing images, you may wish to have the images preload as the page is loading to cut down on display time when the person rolls over the tooltip trigger element. This is quite easy to do using a preloader script:
... where "imageX.jpg" is the path and image file name.
I'm certainly viewing tooltip functionality in a whole different light after my messing around with this script today!
In the interests of transparency and disclosure, please note that the owner of Taming the Beast.net often receives goods and services mentioned in reviews for free, or may receive payments or affiliate commissions for advertising or referring others to merchants of products and services reviewed.
Copyright information.... This article is not available for reproduction without explicit written permission from Michael Bloch and Taming the Beast.net
paid cash taking online surveys - free to join online
In Loving Memory - Mignon Ann Bloch
copyright (c) 1999-2011 Taming the Beast Adelaide - South Australia