DHTML: Tooltip JavaScriptHome Tooltips Main Page


 
Extensions for the JavaScript Tooltips Library
These extensions (plugins) provide additional commands and functionalities to customize the look and behaviour of tooltips.
 
To use an extension, include its JavaScript file into your page. However, make sure that the core file of the Tooltips Library is included first. Example:
<script type="text/javascript" src="wz_tooltip.js"></script>
<script type="text/javascript" src="tip_centerwindow.js"></script>

Adapt the paths to the JavaScript files if necessary. If you want to use a different extension, replace "tip_centerwindow.js". You can include multiple extension files in any order; just make sure that the core file wz_tooltip.js is included first (immediately after the opening <body> tag).

 
 
 
Balloon Tooltip
DHTML: Tooltips via JavaScript  
Top of page
 
Example
Gives the tooltip a balloon style, with rounded corners and a stem pointing towards the mouse.
 
File to include: tip_balloon.js.
Download tip_balloon.zip (5 KB)
 
This file contains also a set of images that build the background, stem, edges and corners of the balloon tooltip. You must save these images, preferably leaving them in the sub-directory 'tip_balloon'. In the plugin file tip_ballon.js, section "GLOBAL TOOPTIP CONFIGURATION", you must adapt the path to these images if necessary. The line to be changed is self-explanatory and commented.
 
Of course you can also create your own set of background/edge/corner/stem images. Note that the corner images (lt.gif, rt.gif, rb.gif und lb.gif) must be quadratic, and their side lengths must be equal to the width of the left/right edge images (l.gif, r.gif) and to the height of the top/bottom edge images (t.gif, b.gif). In the plugin file tip_balloon.js, you should then adapt the global config variables that specify the sizes of these images, if necessary. (If you want to use different sets of images, you can also specify the image path and sizes for each tooltip individually via commands. See below.)

Command Description
BALLOON Gives the tooltip a balloon style. Value: true or false.
Recommended: Combine with ABOVE command, or set the config. Above variable in the global cofiguration in wz_tooltip.js to true if you want this to be the default behaviour.
 
Example:
onmouseover="Tip('This is a balloon tooltip', BALLOON, true, ABOVE, true)"
BALLOONIMGPATH
BALLOONIMGEXT 		Specifies the path to the images that build the background, edges, corners and stem of the balloon tooltip. Useful if you want to use a different set of images (e.g. of other colours) for a certain tooltip. Path must be relative to the HTML file, and enclosed with single quotes. BALLOONIMGEXT optionally permits you to specify the file name extension of these images (e.g. "png"), in case that it differs from the extension preset in tip_balloon.js.
 
Example, for a set of images in a different directory, and with a different file name extension:
onmouseover="Tip('Tooltip text', BALLOON, true, BALLOONIMGPATH, 'somepath/somedir/', BALLOONIMGEXT, "png")"
BALLOONEDGESIZE
BALLOONSTEMWIDTH
BALLOONSTEMHEIGHT 		If you want to use a different set of background/edge/corner/stem images for a certain balloon tooltip, these commands allow you to notify the script about the sizes of those images, in case that they differ from the global settings in tip_balloon.js. Values: Integers > 0.
BALLOONSTEMOFFSET Adjusts the horizontal offset of the stem from the mouse. Value: Integer, also negative.
 
In combination with this, you might also want to play with the OFFSETX command - which sets the horizontal offset of the tooltip itself from the mouse (see commands reference on the main tooltip page).

More sets of ballon style images
Simple Skin by Stasiek Płoski (Homepage: http://www.flupy.net/stasiek ).


 
 
 
Center Tooltip In Window
DHTML: Tooltips via JavaScript  
Top of page
 
Example
File to include: tip_centerwindow.js (comes with the download file wz_tooltip.zip)
 
Provides command(s) to center the tooltip in the visible clientarea of the browserwindow. Makes only sense and works only with "sticky" tooltips, that is, to which the STICKY command has been applied so they stay fixed at their initial position until another tooltip pops up.

Command Description
CENTERWINDOW Centers the tooltip inside the window's clientarea. Value: true or false.
 
Consider that the position of the tooltip deviates from the center by OFFSETX and OFFSETY (see commands on tooltips main page), or by the values globally preset in wz_tooltip.js (config. OffsetX and config. OffsetY).
 
Recommended: Combine with CENTERALWAYS (same extension). Example:
onmouseover="Tip('Some text', STICKY, true, CENTERWINDOW, true, CENTERALWAYS, true)"
CENTERALWAYS Keeps the tooltip centered in the window's clientarea even if the window is scrolled or resized. Has only effect if also CENTERWINDOW (see above) has been applied. Value: true, false.

 
 
 
Follow Scroll
DHTML: Tooltips via JavaScript  
Top of page
 
Example
File to include: tip_followscroll.js (comes with the download file wz_tooltip.zip)
 
This extensions maintains a tooltip's position in the window's visible clientarea even if the window is scrolled. Makes only sense and works only with tooltips to which the STICKY command has been applied so they stay at their initial position until another tooltip pops up.

Command Description
FOLLOWSCROLL Keeps the tooltip at its position in the window's clientarea even if the window is scrolled. Value: true or false.
 
Example:
onmouseover="Tip('Some text', STICKY, true, FOLLOWSCROLL, true)"
 
 
 
 
 
 
 
Walter Zorn, Munich, 2008
Impressum / about this page