ToolTipPlugin
Create Tool Tips for links
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
%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="/p/pub/Plugins/ToolTipPlugin/ToolTipBackground.jpg"}% this %TOOLTIP{END}% 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.
- %TOOLTIP{TEXT="
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.)
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
)
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:
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
Related Topics: TWikiPreferences,
TWikiPlugins
--
TWiki:Main/PatrickNomblot - 21 Nov 2003