|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
 |
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. JavaScript tooltip scripts offer very handy functionality as they can cut down on visible page length or get around the need to use other options such as chromeless popup windows. The good news is you don't need to be experienced in JavaScript, DHTML or AJAX to implement tooltips. I've included a recommendation for an easy to use JavaScript tooltip script at the end of the article. 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! Basic tooltipRoll 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:
Form tooltipsIf 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. Example
Image thumbnail applicationsInstead 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. Example
TestimonialsIf 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 marketingIf 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 scriptsIt's pretty amazing what you can do with tooltip scripts - but it does depend on the script you use. Some are very complex and bulky and do require some Javascript knowledge. 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" Preloading imagesHandy 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: <SCRIPT LANGUAGE="JavaScript"> ... 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! Related articlesBookmarking script and favorites icon Creating chromeless popup windows Free Javascript code snippet library
Michael Bloch Copyright information.... This article is not available for reproduction without explicit written permission from Michael Bloch and Taming the Beast.net
Click here to view article index
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
