Start of topic | Skip to actions

ToolTipPlugin

This is a plugin to generate dynamic Tool Tips in HTML + javascript (mouseover event). This tooltip is based on http://www.walterzorn.com/tooltip/tooltip_e.htm

Examples

put your mouse here, you should see a tooltip .

You can use one or more parameter to get your own and nice tool tip !.

Note that you can also do this and this too !.

: A nice feature is to get clicable TWiki site map in ToolTip :

Parameters

All walterzorn tooltip parameters are allowed and simply passed to the javascript applet. You just don't put the this.T_ before each of them. %TOOLTIP{END}% close the URL and is mandatory.

I have added TWiki specific parameter INCLUDE to fill ToolTip with content of any TWiki topic. The syntax of INCLUDE parameter can be INCLUDE="topic" or INCLUDE="web.topic". Included topic text should only content simple TWiki or HTML datas.

name	usage	example
END (or empty parameter)	End of url text that activate the tooltip (mandatory !).	%TOOLTIP{END}%
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"
TEXT	ToolTip text.
INCLUDE	Topic containing ToolTip text (like TWiki INCLUDE feature).

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 ToolTipPlugin.zip in your twiki installation directory. Content:

File:	Description:
`data/TWiki/ToolTipPlugin.txt`	Plugin topic
`lib/TWiki/Plugins/ToolTipPlugin.pm`	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

Test if the installation was successful:

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

With plugin : put your mouse here, you should see a tooltip

Without plugin : put you mouse here, you should see a tooltip .

Plugin Info

Plugin Author:	TWiki:Main/PatrickNomblot
Plugin Version:	1.3
Change History:
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
21 Nov 2003	TWiki:Main/PatrickNomblot: Initial version
10 Sep 2004	TWiki:Main/PatrickNomblot: tooltip text can comes from any TOPIC
29 Dec 2005	TWiki:Main/AndreUlrich: updated to wz_tooltip.js v. 3.38; added further parameters
CPAN Dependencies:	none
Other Dependencies:	??
Perl Version:	5.6
Plugin Home:	http://TWiki.org/cgi-bin/view/Plugins/ToolTipPlugin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/ToolTipPluginDev

Related Topics: TWikiPreferences, TWikiPlugins

-- TWiki:Main/PatrickNomblot - 21 Nov 2003

End of topic
Skip to actions | Back to top

Show attachments

Hide attachments

Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
gif	ToolTipPhoto.gif	manage	5.7 K	07 Aug 2006 - 11:01	TWikiAdminGroup	Saved by install script
js	wz_tooltip.js	manage	16.2 K	07 Aug 2006 - 11:01	TWikiAdminGroup	Saved by install script
jpg	ToolTipBackground.jpg	manage	1.9 K	07 Aug 2006 - 11:01	TWikiAdminGroup	Saved by install script

TWiki