ToolTipPlugin < TWiki

Tags: view all tags

---+!! <nop>%TOPIC%
<!--
   Contributions to this TWiki plugin are appreciated. Please update the plugin page at
   http://twiki.org/cgi-bin/view/Plugins/ToolTipPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ToolTipPluginDev.
   If you are a TWiki contributor please update the plugin in the SVN repository.
-->
<sticky><div style="float:right; background-color:#EBEEF0; margin:0 0 20px 20px; padding: 0 10px 0 10px;">
%TOC{title="Page contents"}%
</div></sticky>
%SHORTDESCRIPTION%

---++ 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 !.

<!--  Have to escape the following - WYSIWYG corrupts the inline img tags and &quot; encoding in the tip. -->
<sticky>
%TOOLTIP{TEXT="Set BALLOON=&quot;true&quot;  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 <img src=\'%ATTACHURLPATH%/ToolTipPhoto.gif\'> gif/jpg photos and WikiWords in your text...  this is simply HTML! (but remember to escape single quotes (\'), I18N chars, etc :-)), and set STICKY=&quot;true&quot; 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 <img src=\'%ATTACHURLPATH%/ToolTipPhoto.gif\'> gif/jpg photos" FONTCOLOR="#336699" TITLE="Background image" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" WIDTH="190" BGIMG="%ATTACHURLPATH%/ToolTipBackground.jpg"}% this %TOOLTIP{END}% too !.
</sticky>

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

<!-- WYSIWYG chokes on the embedded html table tags in the following - Enclose in sticky tags to escape WYSIWYG -->
<sticky>
   * %TOOLTIP{TEXT="<table width=100% border=0 cellspacing=1 bgcolor=#cccccc cellpadding=1>  <tr bgcolor=#003366>    <td> <font color=#fafafa> Web </font></td>    <td><font color=#fafafa> Why (<i>pourquoi</i>) ? </font></td>    <td width=1% align=right><a href=javascript:void()><font color=#ffffff><b>X</b></font></a></td>  </tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFEFA6><td><a class=twikiLink href=/cgi-bin/view/Main/WebHome><font color=black><b>Main</b></font></a></font></td><td colspan=2><font color=#000000> Welcome to TWiki... <a class=twikiLink href=/cgi-bin/view/Main/TWikiUsers>Users</a>, <a class=twikiLink href=/cgi-bin/view/Main/TWikiGroups>Groups</a>, <a class=twikiLink href=/cgi-bin/view/Main/OfficeLocations>Offices</a> - tour this expandable virtual workspace. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFD8AA><td><a class=twikiLink href=/cgi-bin/view/TWiki/WebHome><font color=black><b>TWiki</b></font></a></font></td><td colspan=2><font color=#000000> <a class=twikiLink href=/cgi-bin/view/TWiki/WelcomeGuest>Welcome</a>, <a class=twikiLink href=/cgi-bin/view/TWiki/TWikiRegistration>Registration</a>, and other <a class=twikiLink href=/cgi-bin/view/TWiki/StartingPoints>StartingPoints</a>; TWiki history &amp; Wiki style; All the docs... </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E0E3E7><td><a class=twikiLink href=/cgi-bin/view/Sandbox/WebHome><font color=black><b>Sandbox</b></font></a></font></td><td colspan=2><font color=#000000> Sandbox test area.  </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#F9D1C9><td><a class=twikiLink href=/cgi-bin/view/Codev/WebHome><font color=black><b>Codev</b></font></a></font></td><td colspan=2><font color=#000000> TWiki development: the core collaboration zone for the TWiki Project. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E3E9A5><td><a class=twikiLink href=/cgi-bin/view/Plugins/WebHome><font color=black><b>Plugins</b></font></a></font></td><td colspan=2><font color=#000000> Repository for TWiki Plugins, Skins and Add-Ons. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E0E3E7><td><a class=twikiLink href=/cgi-bin/view/Salgina/WebHome><font color=black><b>Salgina</b></font></a></font></td><td colspan=2><font color=#000000> Civil engineering exchange for the Salginatobel Bridge. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#B9DAFF><td><a class=twikiLink href=/cgi-bin/view/Support/WebHome><font color=black><b>Support</b></font></a></font></td><td colspan=2><font color=#000000> Tech support for the TWiki collaboration platform. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFFED5><td><a class=twikiLink href=/cgi-bin/view/Wikilearn/WebHome><font color=black><b>Wikilearn</b></font></a></font></td><td colspan=2><font color=#000000> Learn or teach anything related to free or open source software. </font></td></tr></table>" STICKY="true" BORDERCOLOR="#333366" PADDING="0" BORDERWIDTH="1" FONTSIZE="12px" FONTCOLOR="black" ABOVE="false" OFFSETY="-50" WIDTH="550" FOLLOWSCROLL="True"}% <font color=black>Tidy'ed <nop>SiteMap as <nop>ToolTip</font> %TOOLTIP{END}%
</sticky>

   * %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 <nop>SiteMap as <nop>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 %<nop>TOOLTIP{END}% to close the tip text is mandatory.

%TABLE{sort="off"}%
| *name* | *usage* | *example* |
| *TWiki Specific Parameters* |||
| END (or empty parameter) | End of url text that activate the tooltip (mandatory !). | %<nop>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 | <nop>ToolTip text. | |
| URL | Specifies link if this tip is also a link, otherwise defaults to null link | URL=<nop>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 &lt;=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 %SYSTEMWEB%.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 *%TOPIC%.zip* in your twiki installation directory. Content:
     | *File:* | *Description:* |
     | ==data/TWiki/%TOPIC%.txt== | Plugin topic |
     | ==lib/TWiki/Plugins/%TOPIC%.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:* =%TOO%NOP%LTIP{TEXT="Whaoooo !" FONTCOLOR="#336699" TITLE="Nice tooltip, no ?" SHADOW="true" SHADOWCOLOR="#ccaacc" FONTSIZE="18px"}%= put your mouse here, you should see a tooltip =%TOO%NOP%LTIP{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 : <a border="0" href="javascript:void(0);" onmouseover="Tip('Whaoooo !', FONTCOLOR, '#336699', TITLE, 'Nice tooltip, no ?', SHADOWCOLOR, '#ccaacc', SHADOW, 'true', FONTSIZE, '18px' )" onmouseout="UnTip()"> put you mouse here, you should see a tooltip </A>. but only if the wz_tooltip.js file has been loaded in the page templates.  
---

---++ Plugin Info

|  Plugin Author: | TWiki:Main.PatrickNomblot  |
|  Copyright: | &copy; 2004 TWiki:Main.PatrickNomblot <br /> &copy; 2004-2010 TWiki:TWiki.TWikiContributor |
|  Plugin Version: | 19955 (2010-12-11) |
|  Change History: | <!-- specify latest version first -->&nbsp; |
|  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/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topics:__ %SYSTEMWEB%.TWikiPreferences, %SYSTEMWEB%.TWikiPlugins

-- TWiki:Main/PatrickNomblot - 21 Nov 2003

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
jpg	ToolTipBackground.jpg	r1	manage	0.3 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	ToolTipPhoto.gif	r1	manage	5.7 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	b.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	background.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	l.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	lb.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	lt.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	r.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	rb.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	rt.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	stemb.gif	r1	manage	0.2 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	stemt.gif	r1	manage	0.2 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
gif	t.gif	r1	manage	0.1 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
js	tip_balloon.js	r1	manage	8.9 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
js	tip_centerwindow.js	r1	manage	3.2 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
js	tip_followscroll.js	r1	manage	2.6 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script
js	wz_tooltip.js	r1	manage	35.3 K	2010-12-12 - 07:05	TWikiAdminUser	Saved by install script

Topic revision: r2 - 2023-02-01 - TWikiAdminUser

Account
- Log In
- Register User

Edit
Attach

Copyright © 1999-2026 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.ToolTipPlugin.