New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

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.

Cool!

Demo (move your mouse over):

JavaScript Kit

CodeTricks.com

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)";
onMouseout="hideddrivetip()"

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

ddrivetip('TEXT TO DISPLAY', 'OPTIONAL BACKGROUND COLOR', OPTIONAL TIP WIDTH)

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)";
 onMouseout="hideddrivetip()">Yahoo</a>

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.