ToolTipPlugin

Introduction

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 parameters to get your own and nice tool tip !.

And with the latest version you can have Balloon style tips! .

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

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

• Tidy'ed SiteMap as ToolTip

• Raw included SiteMap as ToolTip (This one is also a link to the sitemap on the current web, and will follow the scroll.)

Parameters

All walterzorn tooltip parameters are allowed and simply passed to the javascript applet. For a complete list refer to http://www.walterzorn.com/tooltip/tooltip_e.htm 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=http://twiki.org or web relative URL="../TWiki/SiteMap"
wz_tooltip parameters - see http://www.walterzorn.com/tooltip/tooltip_e.htm
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 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
  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"
  pub/TWiki/ToolTipPlugin/background.gif
  pub/TWiki/ToolTipPlugin/b.gif
  pub/TWiki/ToolTipPlugin/rt.gif
  pub/TWiki/ToolTipPlugin/l.gif
  pub/TWiki/ToolTipPlugin/stemt.gif
  pub/TWiki/ToolTipPlugin/lb.gif
  pub/TWiki/ToolTipPlugin/r.gif
  pub/TWiki/ToolTipPlugin/rb.gif
  pub/TWiki/ToolTipPlugin/t.gif
  pub/TWiki/ToolTipPlugin/stemb.gif

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:

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: put your mouse here, you should see a tooltip

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:	http://TWiki.org/cgi-bin/view/Plugins/ToolTipPlugin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/ToolTipPluginDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/ToolTipPluginAppraisal

Related Topics: TWikiPreferences, TWikiPlugins

-- TWiki:Main/PatrickNomblot - 21 Nov 2003