FF1+ IE5+ Opr7+

Cool DHTML Tooltip

Author: Dynamic Drive

Description: This is a practical, elegant DHTML tooltip script. Use it to display additional information about a link or any other element when the mouse moves over it. A customizable tooltip pops up, which works in all modern DHTML browsers- IE4+, NS6+, and Opera 7+. Three interesting features of this script are:

  • Unlike a regular tooltip (ie: one created using the "title" attribute), Cool DHTML Tooltip continues to display itself and follow the mouse around while the mouse is anywhere over the link/HTML element.

  • Fully customizable tooltip style via CSS, including an optional shadow (IE5.5+ only). You can further modify the background color/width of individual tooltips through JavaScript.

  • Cool DHTML Tooltip intelligently detects the four edges of the browser window, always displaying itself in full view of the user.


Demo (move your mouse over):

JavaScript Kit


Learn how to calculate the difference between two dates in JavaScript, and in the process, derive some useful applications such as counting down to a particular event, counting up, displaying what's new on your page etc.

Directions: Developer's View

Step 1: Insert the following stylesheet into the <head> section of your page:

Select All

Step 2: Insert the below code into the <body> section of your page, outside any other tags, especially relatively or absolutely positioned elements:

Select All

Step 3: Finally, add the following inside any link or page element that will contain a tooltip:

onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)";

The key here is function ddrivetip(), which you should understand how it works:


The last two parameters are optional, and not specifying them causes the script to default to the settings within your CSS file. With that in mind, here are a few actual usage examples:

<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
 onMouseout="hideddrivetip()">Search Engine</a>
<DIV onMouseover="ddrivetip('This DIV has a tip!', '#EFEFEF')";
 onMouseout="hideddrivetip()">Some text here. Some text here.</div>
<a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)";

One last important point: If your tooltip description contains apostrophes ('), be sure to backslash them first, as illustrated in the last example ("Yahoo\'s Site"), or an error will occur.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post