Examples

Write (On a single line!)

Simulate

If Installed

%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" WIDTH="250"}% put your mouse here, you should see a tooltip %TOOLTIP{END}%

%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" WIDTH="250" }% put your mouse here, you should see a tooltip %TOOLTIP{END}%.

%TOOLTIP{TEXT="Set BALLOON=\"true\" The BALLOONIMGPATH will default to the /pub/System/ToolTipPlugin/balloon/ path. " FONTCOLOR="#336699" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" BALLOON="true" WIDTH="250"}% And with the latest version you can have Balloon style tips! %TOOLTIP{END}%. There is also a simple ballon. %TOOLTIP{TEXT="Set BALLOON=\"true\" The BALLOONIMGPATH for a simple ballon is /pub/System/ToolTipPlugin/balloon_simple/ " FONTCOLOR="#336699" BALLOONIMGPATH="/pub/System/ToolTipPlugin/balloon_simple" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" BALLOON="true" WIDTH="250"}% A simple balloon layout %TOOLTIP{END}%

%TOOLTIP{TEXT="Set BALLOON=\"true\" The BALLOONIMGPATH will default to the /pub/System/ToolTipPlugin/balloon/ path " FONTCOLOR="#336699" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" BALLOON="true" WIDTH="250"}% And with the latest version you can have Balloon style tips! %TOOLTIP{END}%.Note that presently MS Internet Explorer has trouble rendering the bottom corners due to some css conflict elsewhere on the page There is also a simple ballon. %TOOLTIP{TEXT="Set BALLOON=\"true\" The BALLOONIMGPATH for a simple ballon is /pub/System/ToolTipPlugin/balloon_simple/ " FONTCOLOR="#336699" BALLOONIMGPATH="/pub/System/ToolTipPlugin/balloon_simple" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" BALLOON="true" WIDTH="250"}% A simple balloon layout %TOOLTIP{END}%

%TOOLTIP{TEXT="You can also insert gif/jpg photos and WikiWords in your text... this is simply HTML! (but remember to escape single quotes (\'), double 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="250"}% insert photos and links %TOOLTIP{END}% This example is "Sticky" - you need to dismiss the popup by touching this or another tip with the mouse.

%TOOLTIP{TEXT="You can set a background image to the tip" FONTCOLOR="#336699" TITLE="Background image" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" WIDTH="190" BGIMG="%ATTACHURLPATH%/ToolTipBackground.jpg" STICKY="true" DURATION="5000"}% This tip has a background image and is "sticky" for 5 seconds.%TOOLTIP{END}% too

%TOOLTIP{TEXT="You can set a background image to the tip" FONTCOLOR="#336699" TITLE="Background image" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" WIDTH="190" BGIMG="/pub/Extensions/ToolTipPlugin/ToolTipBackground.jpg" STICKY="true" DURATION="5000" }% This tip has a background image and is "sticky" for 5 seconds %TOOLTIP{END}%

%TOOLTIP{ URL="../System/SiteMap" TARGET="_blank" INCLUDE="SiteMap" STICKY="true" BORDERCOLOR="#333366" PADDING="0" BORDERWIDTH="1" FONTSIZE="12px" FONTCOLOR="black" ABOVE="false" OFFSETY="100" 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 Foswiki format - Parameter="value". Use of %TOOLTIP{END}% to close the tip text is mandatory.

name

usage

example

Foswiki 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 Foswiki or HTML datas.

INCLUDE="web.topic" or INCLUDE="\"topic\" section=\"sect1\"" The parameter must include any quotes that would normally be required in a %INCLUDE statement. Embedded quotes must be escaped with backslash (\"). Example: INCLUDE="\"Myweb.MyTopic\" section=\"mysection\""

TARGET

Adds the target= operand to the URL.

TARGET="_blank" opens the link in a new window

TEXT

ToolTip text.

Single and double quotes within this string must be escaped with backslash, \" \'

URL

Specifies link if this tip is also a link, otherwise defaults to null link

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

Make any settings changes in your SitePreferences topic. Prefix the setting with TOOLTIPPLUGIN_ as in TOOLTIPPLUGIN_DEBUG = 1. This plugin does not read settings from this topic!

Note:pub/System/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

Note: The images supporting Balloon style tips are stored in sub-directories of the pub/System/ToolTipPlugin directory and are not managable from the Foswiki interface.

Test if the installation was successful:

Testing the plugin

If the javascript is available, the same tooltip is displayed if Plugin is installed and not:
With plugin :

Foswiki: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.

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