.... Internet marketing resources, ecommerce web site design tutorials
  Taming the Beast - quality web marketing and ecommerce development services .... .


Return to web marketing and ecommerce articles index

Simple JavaScript tooltip scripts and extended usage ideas.

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 tooltip

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:

Web development acronyms

Form tooltips

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.


Your surname ?
Your phone number
(international format)
Your residential address ?

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.


Roll your mouse 
over the 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: 

Read what Michael has
to say about tooltips

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:

(roll over for more info)

Download free chapters! Javascript - AJAX - DHTML

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

It'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 images

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:

image1 = new Image();
image1.src = "image1.jpg";
image2 = new Image();
image2.src = "image2.jpg";
image3 = new Image();
image3.src = "image3.jpg";

... 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 articles

Bookmarking script and favorites icon

Creating chromeless popup windows

Free Javascript code snippet library

Michael Bloch
Taming the Beast
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce Resources

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


Click here to view article index 

Online meeting & webinar software review
Powerful, easy to use collaboration tools that can help improve your marketing sales and training efforts. Learn more about these services in this review & try a free trial!

The best shopping cart software
Our reviews of some of the best shopping carts around - free ecommerce solutions  through to premium services offering affiliate programs, marketing modules & online soft goods delivery.  Shopping cart software guide 

Autoresponder software/mailing list manager
 Read our beginners guide and reviews of all-in-one autoresponder & email marketing software solutions.

Credit card transaction fraud screening!  Effective fraud screening is an essential part of running an online businesses. Fraud transactions cost you money and can threaten your merchant account. Pick up a stack of transaction screening tips in this free guide! 

Need some advice/tools for writing/creating a web design, development or marketing proposal?






Get paid cash taking online surveys - free to join online 
survey companies that will pay you cash for your opinion!

In Loving Memory - Mignon Ann Bloch

copyright (c) 1999-2011  Taming the Beast  Adelaide - South Australia 

Profile - Contact - Privacy - Consultants Portfolio 

Search Site - Terms of Service - Social/environmental