Create Tool Tips for links


This is a plugin to generate dynamic Tool Tips in HTML + javascript (mouseover event). This tooltip is based on


%TOOLTIP{TEXT="Whaoooo ! With such a tooltip, you can keep your topics light... and get better communication ! " FONTCOLOR="#336699" TITLE="Nice tooltip, no ?" SHADOWCOLOR="#ccaacc" FONTSIZE="18px"}% put your mouse here, you should see a tooltip %TOOLTIP{END}%.

You can use one or more %TOOLTIP{TEXT="there are soo many parameters..." BGCOLOR="#FF8000" FONTCOLOR="#00FF80" TITLE="PARAMETERS" SHADOWCOLOR="#ccaacc" FONTSIZE="30px"}%parameters%TOOLTIP{END}% to get your own and nice tool tip !.

%TOOLTIP{TEXT="Set BALLOON="true" The BALLOONIMGPATH will default to the pub directory for this topic. " FONTCOLOR="#336699" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" BALLOON="true" WIDTH="450" }% And with the latest version you can have Balloon style tips! %TOOLTIP{END}%.

Note that you can also %TOOLTIP{TEXT="You can also insert gif/jpg photos and WikiWords in your text... this is simply HTML! (but remember to escape single quotes (\'), I18N chars, etc :-)), and set STICKY="true" if you want the links usable." STICKY="true" TITLE="PHOTOS !" FONTCOLOR="#336699" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" WIDTH="400"}% do this %TOOLTIP{END}% and %TOOLTIP{TEXT="you can set a background image so to get a nice tool tip and also add some gif/jpg photos" FONTCOLOR="#336699" TITLE="Background image" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" WIDTH="190" BGIMG="/twiki/pub/TWiki21Nov/ToolTipPlugin/ToolTipBackground.jpg"}% this %TOOLTIP{END}% too !.

NEW: A nice feature is to get clickable TWiki site map in ToolTip. These are "Sticky" and don't dismiss when the mouse moves away.

    Web Why (pourquoi) ? X
    Main Welcome to TWiki... Users, Groups, Offices - tour this expandable virtual workspace.
    TWiki Welcome, Registration, and other StartingPoints; TWiki history & Wiki style; All the docs...
    Sandbox Sandbox test area.
    Codev TWiki development: the core collaboration zone for the TWiki Project.
    Plugins Repository for TWiki Plugins, Skins and Add-Ons.
    Salgina Civil engineering exchange for the Salginatobel Bridge.
    Support Tech support for the TWiki collaboration platform.
    Wikilearn Learn or teach anything related to free or open source software.
    " STICKY="true" BORDERCOLOR="#333366" PADDING="0" BORDERWIDTH="1" FONTSIZE="12px" FONTCOLOR="black" ABOVE="false" OFFSETY="-50" WIDTH="550" FOLLOWSCROLL="True"}% Tidy'ed SiteMap as ToolTip %TOOLTIP{END}%

  • %TOOLTIP{ URL="../TWiki/SiteMap" TARGET="_blank" INCLUDE="SiteMap" STICKY="true" BORDERCOLOR="#333366" PADDING="0" BORDERWIDTH="1" FONTSIZE="12px" FONTCOLOR="black" ABOVE="false" OFFSETY="-350" WIDTH="800" CENTERWINDOW="true" CENTERALWAYS="true"}% Raw included SiteMap as ToolTip %TOOLTIP% (This one is also a link to the sitemap on the current web, and will follow the scroll.)


All walterzorn tooltip parameters are allowed and simply passed to the javascript applet. For a complete list refer to Pass the parameters using the standard TWiki format - Parameter="value". Use of %TOOLTIP{END}% to close the tip text is mandatory.

name usage example
TWiki Specific Parameters
END (or empty parameter) End of url text that activate the tooltip (mandatory !). %TOOLTIP{END}%
INCLUDE Include a topic text into the tooltip. Included topic text should only content simple TWiki or HTML datas. INCLUDE="web.topic" or INCLUDE="topic"
TARGET Adds the target= operand to the URL. TARGET="_blank" opens the link in a new window
TEXT ToolTip text.  
URL Specifies link if this tip is also a link, otherwise defaults to null link URL= or web relative URL="../TWiki/SiteMap"
wz_tooltip parameters - see
ABOVE Places the tooltip above the mousepointer. Additionally applying the OFFSETY command allows to set the vertical distance from the mousepointer. ABOVE="true"
BGCOLOR Background color of the tooltip. BGCOLOR="#d3e3f6"
BGIMG Background image. BGIMG="images/myBgImg.jpg"
BORDERWIDTH Width of tooltip border. May be 0 to hide the border. BORDERWIDTH="3"
BORDERCOLOR Border color. BORDERCOLOR="#336699"
DELAY Tooltip shows up after the specified timeout (milliseconds). DELAY="1000"
FIX Fixes the tooltip to the co-ordinates specified. Useful, for example, if combined with the STICKY command. FIX="[200, 2400]"
FONTCOLOR Font color. FONTCOLOR="#993399"
FONTFACE Font face / family. FONTFACE="verdana,geneva,sans-serif"
FONTSIZE Font size + unit. Unit inevitably required. FONTSIZE="30px"
FONTWEIGHT Font weight. Available values: "normal" or "bold". FONTWEIGHT="bold"
LEFT Tooltip positioned on the left side of the mousepointer. LEFT="true"
OFFSETX Horizontal offset from mouse-pointer. OFFSETX="32"
OFFSETY Vertical offset from mouse-pointer. OFFSETY="32"
OPACITY Transparency of tooltip. Opacity is the opposite of transparency. Value must be a number between 0 (fully transparent) and 100 (opaque, no transparency). Not (yet) supported by Opera. OPACITY="50"
PADDING Inner spacing, i.e. the spacing between border and content, for instance text or image(s). PADDING="5"
SHADOWCOLOR Creates shadow with the specified color. Shadow width (strength) will be automatically processed to 3 (pixels) if no global shadow width setting can be found in in wz_tooltip.js, and the concerned html tag doesn"t contain a SHADOWWIDTH command. SHADOWCOLOR="#ccaacc"
SHADOWWIDTH Creates shadow with the specified width (strength). SHADOWWIDTH="6"
STATIC Like OS-based tooltips, the tooltip doesn"t follow the movements of the mouse-pointer. STATIC="true"
STICKY The tooltip stays fixed on it's initial position until another tooltip is activated, or the user clicks on the document. STICKY="true"
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 STICKY command has been applied. Values <=0 make the tooltip behave "normally" as if no time span had been specified. TEMP="3500"
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. TEXTALIGN="right"
TITLE Title. Text in single quotes. Background color is automatically the same as the border color. TITLE="Some title"
TITLECOLOR Color of title text. TITLECOLOR="#ff6666"
WIDTH Width of tooltip. WIDTH="200"

General Settings

  • One line description, shown in the TextFormattingRules topic:
    • Set SHORTDESCRIPTION = Create Tool Tips for links

  • Debug plugin: (See output in data/debug.txt)
    • Set DEBUG = 0

Plugin Installation Instructions

Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the server where TWiki is running.

  • Download the ZIP file from the Plugin web (see below)
  • Unzip in your twiki installation directory. Content:
    File: Description:
    data/TWiki/ToolTipPlugin.txt Plugin topic
    lib/TWiki/Plugins/ Plugin Perl module
    pub/TWiki/ToolTipPlugin/ToolTipBackground.jpg sample image
    pub/TWiki/ToolTipPlugin/ToolTipPhoto.gif sample image
    pub/TWiki/ToolTipPlugin/wz_tooltip.js wz tooltip library
    pub/TWiki/ToolTipPlugin/tip_centerwindow.js Support for tip centering
    pub/TWiki/ToolTipPlugin/tip_followscroll.js Support for tip to remain stationary as page scrolls behind it.
    pub/TWiki/ToolTipPlugin/tip_balloon.js Support for "Balloon" tips
    pub/TWiki/ToolTipPlugin/lt.gif Images used to build "Balloon Tips"

Note: pub/TWiki/ToolTipPlugin/wz_tooltip.js has been left with the default debug parameter enabled. The script recommends that the parameter be set to false when debugging of tooltips is no longer necessary. var tt_Debug = true

  • Test if the installation was successful:

Testing the plugin

The same tooltip is displayed if Plugin is installed and not:

With plugin :

Write: %TOOLTIP{TEXT="Whaoooo !" FONTCOLOR="#336699" TITLE="Nice tooltip, no ?" SHADOW="true" SHADOWCOLOR="#ccaacc" FONTSIZE="18px"}% put your mouse here, you should see a tooltip %TOOLTIP{END}

See: %TOOLTIP{TEXT="Whaoooo !" FONTCOLOR="#336699" TITLE="Nice tooltip, no ?" SHADOW="true" SHADOWCOLOR="#ccaacc" FONTSIZE="18px"}% put your mouse here, you should see a tooltip %TOOLTIP{END}%

Without plugin : put you mouse here, you should see a tooltip . but only if the wz_tooltip.js file has been loaded in the page templates.

Plugin Info

Plugin Author: TWiki:Main.PatrickNomblot
Copyright: © 2004 TWiki:Main.PatrickNomblot
© 2004-2010 TWiki:TWiki.TWikiContributor
Plugin Version: 19955 (2010-12-11)
Change History:  
2010-12-11: TWikibug:Item6530: Doc improvements, changing TWIKIWEB to SYSTEMWEB -- TWiki:Main.PeterThoeny
28 Aug 2008 TWiki:Main/GeorgeClark: TWikibug:Item5966: Syntax changed for calling wz_tooltip.js, updated to wz_tooltip.js V5.20, reworked documentation, .js file only included when %TOOLTIP is present in the topic. Also added support for optional extensions for balloon, scrolling and centered tips.
2 Aug 2008 TWiki:Main/GeorgeClark: TWikibug:Item6040: Incomplete implementation of a TWiki::Func routine has security implications
15 Apr 2006 TWiki:Main/SteffenPoulsen: Updated with new version of wz_tooltip.js (updated browser support), support for Dakar, cleaned up doc a bit
29 Dec 2005 TWiki:Main/AndreUlrich: updated to wz_tooltip.js v. 3.38; added further parameters
10 Sep 2004 TWiki:Main/PatrickNomblot: tooltip text can comes from any TOPIC
21 Nov 2003 TWiki:Main/PatrickNomblot: Initial version
Dependencies: None
Plugin Home:

Related Topics: TWikiPreferences, TWikiPlugins

-- TWiki:Main/PatrickNomblot - 21 Nov 2003

Edit | Attach | Watch | Print version | History: r1 | Backlinks | Raw View | WYSIWYG | More topic actions
Topic revision: r1 - 2010-12-12 - TWikiContributor
    • Cern Search Icon Cern Search
    • TWiki Search Icon TWiki Search
    • Google Search Icon Google Search

    TWiki21Nov All webs login

This site is powered by the TWiki collaboration platform Powered by PerlCopyright & 2008-2022 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
or Ideas, requests, problems regarding TWiki? use Discourse or Send feedback