German version German version
DHTML: Tooltip JavaScriptHome DHTML-Drag&Drop-Library VectorGraphics-Library Function-Grapher


JavaScript, DHTML
Tooltips
JavaScript Cross Browser Library.
Developed by Walter Zorn
 
Here you get the latest version of the Tooltips DHTML Library.
 
This page is no longer maintained. It's only here for the convenience of those who are still using an old version (prior to v.4.0) of wz_tooltip.js.

 
  
 
 
DHTML: Tooltip with JavaScript  
Cross Browser
 
Documentation
 
Download
 
A cross-browser Tooltip JavaScript to create tooltips (information popup boxes like this one). These crossbrowser JavaScript Tooltips and their behavior can be customized in multiple ways, and may contain plain text as well as HTML, such as images or line breaks etc..
 
 
 
Characteristics
Image with a JavaScript tooltip (yes, that's me)
This Tooltip JavaScript works even in Opera 5 and 6. Each HTML tag to display a tooltip requires an onmouseover attribute only, 'onmouseouts' are unnecessary. Optionally, you can insert commands into these onmouseover attributes to customize the JavaScript tooltips individually. See the demonstration and documentation on the bottom of this page.
 
 
 
Cross Browser Functionality
Except of a few rarely used ones, all browsers can interpret this Tooltip JavaScript.
 
Linux:
Konqueror 3, Browsers with Gecko-Engine (Mozilla, Netscape 6, Galeon), Netscape 4 and 6, Opera 5 and 6.
 
Windows:
Netscape 4, Gecko Browsers, IE 4, 5+, Opera 5, 6, 7+
 
Other systems:
The matches to the above listed Linux/Windows browsers have full access.
 
 
 
 
Documentation
DHTML: Tooltips via JavaScript  
Top of page
 
Cross Browser
 
Documentation
 
Download
 
1. Save the library
Download wz_tooltip.js and unzipp it. Save it into the same directory as your html file. If you'd prefer to save it into a different directory, adapt the path src="wz_tooltip.js" in the code piece below.
Please use the downloaded version of wz_tooltip.js only. Don't copy the script from your browser's cache, and don't hotlink wz_tooltip.js from this site into your site.
 
 
2. Link wz_tooltip.js into the html file
Insert the following lines into the <body> section or your html file, preferably immediately before the closing </body> tag, but in any case after the last tag containing a tooltip:
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
 
 
3. Insert desired text into the html tags
Each of the html tags to create a tooltip requires an onmouseover attribute only, onmouseouts are unnecessary:
<a href="index.htm" onmouseover="return escape('Some text')">Homepage </a>

As illustrated by this example, the text, enclosed with single quotes, must be passed to a function call return escape(). Attention: Single quotes or apostrophes, respectively, inside the tooltip text itself each must be escaped with a backslash. Example:
return escape('This text won\'t create an error.');
Characters not found in the normal alphanumeric character set, inevitably must be specified using character entities. For instance, use &quot; instead of " or &Ouml; instead of Ö. Consider the following three irregularities: Write & amp; instead of &amp;, & lt; instead of &lt; (displaying as <) and & gt; instead of &gt; (displaying as >).
DHTML: Tooltips per JavaScript  
Top of page
 
Cross Browser
 
Documentation
 
Download
 
 
 
 
 
Extended possibilities
4. HTML inside tooltips
Consider the following irregularity:
Different from normal html, values of tag attributes embedded into the tooltip text must be enclosed in single quotes, each escaped with a backslash, rather than in double quotes. Example:

Correct:
<a href="index.htm" onmouseover="return escape('Text with <img src=\'image.jpg\' width=\'60\'> image.')"> Homepage</a>
 
Wrong:
<a href="index.htm" onmouseover="return escape('Text with <img src="image.jpg" width="60">image.')"> Homepage</a>


 
 
5. Tooltip content via variables or function calls
Alternatively, instead of a string, return escape() accepts a variable defined elsewhere -
example: onmouseover="return escape(text1)"
- or even a function call -
example: onmouseover="return escape(TooltipText())" .
Variables or functions should be defined in a separate JS file or a <script> block within the <head> section, and might be useful, for instance, to facilitate having identical text for several tooltips. Even the irregularities with non-alphanumeric characters and with quotes (see point 3 and 4) needn't to be regarded anymore. Therefore, it's also less critical to include text that has been created dynamically on the server.
DHTML: Tooltips per JavaScript  
Top of page
 
Cross Browser
 
Documentation
 
Download
 
 
 
6. Commands to customize tooltips individually
The following commands may be passed to the "onmouseovers" inside the html tags. These commands override the global configuration specified in wz_tooltip.js itself (in the section "GLOBAL TOOLTIP CONFIGURATION"):

Command Effect Example
this.T_ABOVE Places the tooltip above the mousepointer. Value: true
You might additionally apply the this.T_OFFSETY command in order to set the vertical distance from the mousepointer.
 
Note that, in case that the space above the mousepointer isn't sufficient, the tooltip is displayed below the mousepointer as usual. 		this.T_ABOVE = true;
this.T_BGCOLOR Background color of the tooltip. Value must be enclosed in single quotes. this.T_BGCOLOR='#d3e3f6';
this.T_BGIMG Background image. Value in single quotes. this.T_BGIMG='images/myBgImg.jpg';
this.T_BORDERWIDTH Width of tooltip border. May be 0 to hide the border. this.T_BORDERWIDTH=3;
this.T_BORDERCOLOR Border color. Value in single quotes. this.T_BORDERCOLOR='#336699';
this.T_CLICKCLOSE Value: true
Closes the tooltip once the user clicks somewhere inside the tooltip or onto the document. Of course, this.T_CLICKCLOSE has only effect on tooltips to which the this.T_STICKY command has been applied. 		this.T_CLICKCLOSE = true;
this.T_DELAY Tooltip shows up after the specified timeout (milliseconds). A behavior similar to that of OS based tooltips. this.T_DELAY=1000;
this.T_FIX Fixes the tooltip to the co-ordinates specified within the square brackets. Useful, for example, if combined with the this.T_STICKY command. this.T_FIX = [200, 2400];
this.T_FONTCOLOR Font color. Value in single quotes. this.T_FONTCOLOR='#993399';
this.T_FONTFACE Font face / family. Value in single quotes. this.T_FONTFACE='verdana,geneva,sans-serif';
this.T_FONTSIZE Font size + unit. Value in single quotes. Unit inevitably required. this.T_FONTSIZE='30px';
this.T_FONTWEIGHT Font weight. Available values: 'normal' or 'bold'. this.T_FONTWEIGHT='bold';
this.T_LEFT Tooltip positioned on the left side of the mousepointer. Value: true.
 
this.T_ABOVE=true;this.T_LEFT=true; 		this.T_LEFT = true;
this.T_OFFSETX Horizontal offset from mouse-pointer.
 
To center the tooltip below (or above) the mousepointer, apply the value -tooltipwidth/2. In wz_tooltip.js itself, width is preset to 300. 		this.T_OFFSETX=32;
this.T_OFFSETY Vertical offset from mouse-pointer. this.T_OFFSETY=32;
this.T_OPACITY Transparency of tooltip. Opacity is the opposite of transparency. Value must be a number between 0 (fully transparent) and 100 (opaque, no transparency). Another example with image (taken on my 9000-km / 5500-miles recumbent bicycle trip Hamburg-Northcape-Munich), shadow via this.T_SHADOWWIDTH, centered content via this.T_TEXTALIGN and background image via this.T_BGIMG command. this.T_OPACITY=80;
this.T_PADDING Inner spacing, i.e. the spacing between border and content, for instance text or image(s). this.T_PADDING=5;
this.T_SHADOWCOLOR Creates shadow with the specified color. Value in single quotes. Shadow width (strength) is automatically set to 5 (pixels) if no global shadow width setting can be found in in wz_tooltip.js, and the concerned html tag doesn't contain a this.T_SHADOWWIDTH command. this.T_SHADOWCOLOR='#ccaacc';
this.T_SHADOWWIDTH Tooltip drops a shadow of the specified width (offset). Shadow color is automatically set to '#c0c0c0' (light grey) if neither a global setting in wz_tooltip.js nor a this.T_SHADOWCOLOR command can be found. this.T_SHADOWWIDTH=8;
this.T_STATIC Like OS-based tooltips, the tooltip doesn't follow the movements of the mouse-pointer. Value: true this.T_STATIC=true;
this.T_STICKY The tooltip stays fixed at its initial position until another tooltip pops up. Value: true. To enforce the tooltip to disappear after a certain time span, you might additionally apply the this.T_TEMP command. this.T_STICKY=true;
this.T_TEMP Specifies a time span in milliseconds after which the tooltip disappears, even if the mousepointer is still on the concerned HTML element, or if the this.T_STICKY command has been applied. this.T_TEMP=3500;
this.T_TEXTALIGN Aligns the text of both the title and the body of the tooltip. Values must be included in single quotes and can be either 'right', 'justify' or 'left', the latter being unnecessary since it is the preset default value. this.T_TEXTALIGN='right';
this.T_TITLE Title. Text in single quotes. Background color is automatically the same as the border color. this.T_TITLE='Some title';
this.T_TITLECOLOR Color of title text. Preset in wz_tooltip.js is '#ffffff' (white). this.T_TITLECOLOR='#ff6666';
this.T_WIDTH Width of tooltip. this.T_WIDTH=200;
Complete example of how to use these commands:
<a href="index.htm" onmouseover="this.T_WIDTH=200;this.T_FONTCOLOR='#003399';return escape('Blablah')"> Homepage</a>

 
As may be evident from this example, the command(s), each terminated with a semicolon, should be inserted ahead of the function call.
 
 
 
Multiple Functions From a Single Onmouseover?
To apply additional onmouseover functions to the same HTML element, e.g. a swap-image function, you cannot put these into the same onmouseover. Instead, you must use a second onmouseover within a nested HTML tag, for example:
 
<a href="page.htm" onmouseover="return escape('Tooltip text')">
  <span onmouseover="SwapImage(...)">Link</span>
</a>
 
 
 
How to Apply Tooltips To an Imagemap
Insert the tooltips into the <area>-tags. Sample:
 
<map name="myMap">
  <area onmouseover="return escape('This is area 1')" shape=... >
  <area onmouseover="return escape('This is area 2')" shape=... >
</map>
<img usemap="#myMap" src="myImage.jpg" alt="...">
DHTML: Tooltips per JavaScript  
Top of page
 
Cross Browser
 
Documentation
 
Download
 
 
 
 
 
 
Download
wz_tooltip.js   3.45     zipped 6.21 KB
wz_tooltip_3_45.zip
 
history.txt (Changelog of wz_tooltip.js)
 
 
 
 

 
 
 
DHTML: Tooltips per JavaScript  
Top of page
 
Cross Browser
 
Documentation
 
Download
 
 
 
 
 
 
 
 
Walter Zorn, Munich, 2006