Dynamic Drive DHTML code library!
Dynamicdrive.com


New

|

 Revised Hot FAQ Submit M Zone
.
spacer.gif (807 bytes)
.

Menu
Search DD
Recommend DD
Help Forums New
DHTML books
Advertising
Contact

Featured Script
Rollover buttons 
Turn regular form buttons into rollover menus with this script!
.

Partners
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
Note: 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!

Demo

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')"
onMouseout="hidetip()"><AREA SHAPE="RECT" COORDS="103, 10, 174, 75" HREF="http://www.wsabstract.com" onMouseover="showtip(this,event,'Click here for Website Abstraction')"
onMouseout="hidetip()">
</MAP>
<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...

Legend
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