New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opr8+

Image w/ description tooltip v2.0

Author: Dynamic Drive

Note: Script completely rewritten April 25th 2010, named version 2.0

Description: Move the mouse over a link and have the image of your choice plus corresponding description pop up, by using this image tooltip script. Each tooltip is defined inside the script then associated with an element on the page by inserting a "rel" attribute into the later. Moreover, each tooltip can easily sport a completely different style from its peers. thanks to the script's support for custom CSS styles that can be defined on each tooltip individually inside the script.

The script detects for window edges and keeps each tooltip inside it.

Demo: Move your mouse over any of the following links:

Link 1

Link 2

Link 3

Link 4

Directions Developer's View

Step 1: Insert the below script into the <head> section of your page:

Select All

The above code references two external files which you should download below (right click, and select "Save As"):

Near the top of ddimgtooltip.js is where you define your tooltips:

tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
tooltips[2]=["dynamicindex14/winter.jpg"]
tooltips[3]=["dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

Each tooltip's syntax should be as follows:

tooltip[x]=['path_to_image', 'optional desc', optional_CSS_object]

Where x should be an sequential integer starting from 0, with the following 1 to 3 components defined:

  1. Full path or URL to the tooltip image
  2. Description that's displayed beneath the image. Optional.
  3. Object containing the desired CSS properties to add to the tooltip. The syntax should be:
    {property1:"cssvalue1", property2:"cssvalue2", etc}
    where "property" should be a valid CSS property, and "value" a valid CSS value. If more than one pair is defined, separate each pair with a comma.

Step 2: Then, to associate a tooltip with a link on your page, just give it a "rel" attribute of imgtip[x], with x being the index of the tooltip you wish to display for the given link (0=1st tooltip, 1=2nd tooltip etc). Here is some sample links you can insert onto your page to illustrate this:

Select All

Enjoy!