Dynamic Drive DHTML code library!

spacer.gif (807 bytes)


Search DD
Recommend DD
Help Forums New
DHTML books

Featured Script
Rollover buttons 

Turn regular form buttons into rollover menus with this script!


Free JavaScripts

Link to DD

Do you use scripts from Dynamic Drive? Please give something back by linking to us...
spacer.gif (807 bytes)

Home Small4.gif (1046 bytes) Links and buttons Small4.gif (1046 bytes) Here

DHTML Tooltip Script All

Credits: Dynamic Drive
Deprecated script. See Cool DHTML Tooltip for new script.

Description: An easy-to-install tooltip script that allows your text links or image map to have a tooltip when the mouse moves over them!


Text link tooltip example:

WB01389_.gif (104 bytes) Dynamic Drive
WB01389_.gif (104 bytes) JavaScript Kit
WB01389_.gif (104 bytes) Yahoo
WB01389_.gif (104 bytes) Cnet
WB01389_.gif (104 bytes) Techweb

Image Map tooltip example:

Directions: Developer's View

Step 1: Insert the below into the <body> section of your web page, right after the <body> tag itself, before anything else:

Giving text links a tooltip:
Having done the above, giving any text link a "tooltip" is a snap. Simply add the following code to the <a> tag of the link in question:

onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()"

with the part in red representing the text you want shown inside the tip. An example would be:

<a href="http://dynamicdrive.com" onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()">Dynamic Drive</a>

If the text inside the tooltip is very long, and you wish to "break it" (like the tip for Techweb above), simply add the "\n" to the text. For example:

onMouseover="showtip(this,event,'Visit Techweb for the latest happenings<br>in the computer sector ')" onMouseout="hidetip()"

Giving image map a tooltip:
The process for giving your image map a tooltip is the exact same as for text links. Simply insert the same code after the href attribute of each image spot. For example:

<MAP NAME="FrontPageMap0">
<AREA SHAPE="RECT" COORDS="57, 78, 135, 138" HREF="http://www.webreference.com" onMouseover="showtip(this,event,'Click here for Webreference')"
><AREA SHAPE="RECT" COORDS="103, 10, 174, 75" HREF="http://www.wsabstract.com" onMouseover="showtip(this,event,'Click here for Website Abstraction')"

<img src="imagemap.gif" width="188" height="173" border="0" alt="imagemap.gif (14679 bytes)" usemap="#FrontPageMap0">

Note to Frontpage 98 (and other similar html editor) users:  In Frontpage 98, an image map is represented as a "bot", meaning that when you view the source of the image map within the editor, the href attribute of the individual spots are not revealed. This is a problem, since the tooltip code has to be inserted right alongside the href attribute. To get around this, open the file using a simple text editor. The href attribute will be present, allowing you to insert the tooltip script.

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6

Copyright 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference