DIR : /home/kozerus/public_html/js/wz/wz_tooltip.html
/home/kozerus/public_html/js/wz
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"--><head>
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>DHTML JavaScript Tooltips</title>
<link rel="stylesheet" type="text/css" href="/js/wz/newwalterzorn.css">
<style type="text/css">
<!--
.tt {
font-size:12px;
}
.sample {
border: 1px solid #000099;
background: #eeeeee;
padding: 3px;
}
#T2tDirect {
border:2px solid red;
background:yellow;
padding:3px;
}
-->
</style>
<script type="text/javascript">
<!--
function MyTip(arg)
{
switch(arg)
{
case "browser":
return Tip("Gecko-Browsers (Firefox, Mozilla, Netscape 6+)<br>Konqueror<br>IE 5+<br>Opera 7+<br>Safari<br>and all W3C-DOM-conformant browsers", TITLE, "Supported Browsers", ABOVE, true, SHADOW, true, JUMPHORZ, true);
case "docu":
return Tip("Read how simple it is to use the script. However, if you like to, you have also advanced possibilities to configure tooltips, either globally by setting the config variables in the script to the desired values, or individually through commands.", WIDTH, 300, SHADOW, true, ABOVE, true, JUMPHORZ, true);
case "download":
return Tip("Go to the paragraph where you can<br>download wz_tooltip.js as ZIP file", SHADOW, true, JUMPHORZ, true);
case "extensions":
return TagToTip('T2TExtensions', BALLOON, true, ABOVE, true, JUMPHORZ, true, OFFSETX, -17);
case "features":
return Tip("Short summary of features and capabilities", SHADOW, true, ABOVE, true, JUMPHORZ, true);
case "home":
return Tip("Go to the startpage of walterzorn.com", SHADOW, true);
}
}
function FixCalcXY(el)
{
if(typeof(el.offsetParent) == "undefined")
return [70, 4000];
var a = new Array(0, -70);
while(el)
{
a[0] += el.offsetLeft || 0;
a[1] += el.offsetTop || 0;
el = el.offsetParent || null;
}
return a;
}
//-->
</script>
<head>
<body bgcolor=linen>
<h1>/js/wz/wz_tooltip</h1>
<hr color=black>
<div id="WzTtDiV" style="visibility: hidden; position: absolute; overflow: hidden; padding: 0px; width: 0px; left: 0px; top: 0px;"></div>
<script type="text/javascript" src="/js/wz/wz_tooltip.js"></script>
<script type="text/javascript" src="/js/wz/tip_balloon.js"></script>
<script type="text/javascript" src="/js/wz/tip_drag.js"></script>
<a name="top"> </a>
<a href="http://www.walterzorn.de/tooltip/tooltip.htm" target="_top"><img src="/js/wz/germany.gif" alt="German version" width="22" height="15" border="0" align="middle"></a> <small><a href="http://www.walterzorn.de/tooltip/tooltip.htm" target="_top">German version</a></small>
<center>
<table>
<tbody><tr>
<td align="center"><a onmouseover="MyTip('home')" onmouseout="UnTip()" href="http://walterzorn.de/en/index.htm"><img name="logo" src="/js/wz/logo.gif" alt="" width="271" height="30" border="0"></a></td>
</tr>
</tbody></table>
<table cellspacing="10">
<tbody><tr>
<td><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltip JavaScript" width="1" height="1"><a onmouseover="MyTip('home')" onmouseout="UnTip()" href="http://walterzorn.de/en/index.htm">Home</a></td>
<td><a onmouseover="Tip('A JavaScript to make images and layers draggable. An easy-to-include cross browser solution. See on this page how it works.', WIDTH, -300, SHADOW, true)" onmouseout="UnTip()" href="http://walterzorn.de/en/dragdrop/dragdrop_e.htm">DHTML-Drag&Drop-Library</a></td>
<td><a onmouseover="Tip('Draw lines, circles, ellipses, polygons or rectangles dynamically into a webpage. A JavaScript with optimized performance, creating cleanly arranged pixel stair patterns. Demo page', WIDTH, -300, SHADOW, true)" onmouseout="UnTip()" href="http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm">VectorGraphics-Library</a></td>
</tr>
<!--tr><td colspan="4"><form><select onmouseover="Tip('Tooltip applied to SELECT')" onmouseout="UnTip()"><option>abdlkdvsadfasdfasdvasdfasdfadfadfadsfassdfvsdadfasdfdfvsdfasd</option><option>avasas</option></select> <input type="text" size="20"></form></td></tr-->
</tbody></table>
<br>
<table cellpadding="3">
<tbody><tr>
<td width="150" valign="top" align="center">
<br> <br> <br> <br> <br> <br> <br> <br> <br>
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td>
<br> <br>
<br> <br> <br>
</td>
</tr>
</tbody></table>
</td>
<td align="left">
<table>
<tbody><tr>
<td>
<b>
<br><big>JavaScript, DHTML Tooltips</big>
<br>
JavaScript Cross Browser Library.
</b>
<br>
<small>Developed by Walter Zorn</small><br>
</td>
<td rowspan="4" width="150" valign="top" align="center">
<br> <br> <br>
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltip with JavaScript" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#features" onmouseover="MyTip('features')" onmouseout="UnTip()">Features</a>
<br> <br>
<a href="#browser" onmouseover="MyTip('browser')" onmouseout="UnTip()">Cross Browser</a>
<br> <br>
<a href="#docu" onmouseover="MyTip('docu')" onmouseout="UnTip()">Documentation</a>
<br> <br>
<a href="#extensions" onmouseover="MyTip('extensions')" onmouseout="UnTip()">Extensions</a>
<br> <br>
<a href="#download" onmouseover="MyTip('download')" onmouseout="UnTip()">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
An easy to use cross-browser Tooltip JavaScript Library that creates tooltips, information popup boxes
<a href="javascript:void(0);" onmouseover="Tip('This is a tooltip')" onmouseout="UnTip()">like this one</a>.
</td>
</tr>
<tr>
<td>
<big> <br><a name="features"> </a><br><b>Features</b></big>
</td>
</tr>
<tr>
<td>
The
<a href="javascript:void(0)" onmouseover="TagToTip('T2TAdaptWidth')" onmouseout="UnTip()">width</a>
of the tooltips is adapted automatically.
<span id="T2TAdaptWidth" style="display: none;">Of course you can also specify the width if you like to.</span>
The tooltips may contain plain text as well as HTML, such as
<a href="javascript:void(0);" onmouseover="Tip('Tooltip containing an image, inserted into the tooltip text via &lt;img&gt; tag<br><img src=/js/wz/wz_leop.jpg width=150 height=102>', WIDTH, 150, PADDING, 6, BGCOLOR, '#ffffff')" onmouseout="UnTip()">images</a>,
line
<a href="javascript:void(0)" onmouseover="Tip('Text with line<br>break, enforced by a &lt;br&gt; HTML tag')" onmouseout="UnTip()">breaks</a>,
<a href="javascript:void(0)" onmouseover="Tip('<table border=\'0\' cellspacing=\'5\'><tr><th colspan=\'2\' style=\'font-size:8pt;background:#ffcccc;\'>HTML table in tooltip<\/th><\/tr><tr><td style=\'font-size:8pt;background:#ffffff;\'>Row 2, Cell 1<\/td><td style=\'font-size:8pt;background:#ffffff;\'>Row 2, Cell 2<\/td><\/tr><tr><td style=\'font-size:8pt;background:#ffffff;\'>Row 3, Cell 1<\/td><td style=\'font-size:8pt;background:#ffffff;\'>Row 3, Cell 2<\/td><\/tr><\/table>')" onmouseout="UnTip()">tables</a>,
lists etc..
If you like, you can
<a href="javascript:void(0);" onmouseover="Tip('Tooltip with altered font and colors', TITLE, 'This one has a title', BGCOLOR, '#ffcccc', FONTCOLOR, '#800000', FONTSIZE, '9pt', FONTFACE, 'Courier New, Courier, mono', BORDERCOLOR, '#c00000')" onmouseout="UnTip()">customize</a>
<img src="/js/wz/kreuzot_ss.jpg" alt="Image with a JavaScript tooltip (That's me on a quick 200km trip with my homebuilt carbon lowracer)" title="Image with a JavaScript tooltip (That's me on a quick 200km trip with my homebuilt carbon lowracer)" onmouseover="Tip('Tooltip applied to an IMG tag, and animated using the FADEIN and FADEOUT commands. (That\'s me on a quick 200km trip with my homebuilt carbon lowracer.)', WIDTH, 300, FADEIN, 500, FADEOUT, 500)" onmouseout="UnTip()" width="200" vspace="8" hspace="8" height="105" align="left">
these crossbrowser JavaScript Tooltips and their
<a href="javascript:void(0);" onmouseover="Tip('A tooltip that fades in and out (FADEIN and FADEOUT commands) and is placed above the mousepointer (ABOVE command).', WIDTH, 250, ABOVE, true, OFFSETX, 1, FADEIN, 400, FADEOUT, 300)" onmouseout="UnTip()">behavior</a>
in multiple ways.
You can change the default configuration values inside
the library itself (section GLOBAL TOOLTIP CONFIGURATION),
or configure each tooltip individually by passing
<a href="#docu" onmouseover="Tip('For examples on how to alter the behaviour and look of tooltips, see the <a href=\'#docu\'>documentation<\/a>', WIDTH, 300, TITLE, 'Tooltip Configuration', SHADOW, true, FADEIN, 300, FADEOUT, 300, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true)" onmouseout="UnTip()">commands</a>
to the onmouseover eventhandlers.
<br> <br>
There are also
<a href="#extensions" onmouseover="TagToTip('T2TBalloon', BALLOON, true, ABOVE, true, WIDTH, 260, PADDING, 8, TEXTALIGN, 'justify', OFFSETX, -17)" onmouseout="UnTip()">Extensions (plugins)</a>
available (or write your own!) which provide additional options to customize the tooltips.
<span id="T2TBalloon" style="display: none;">For example, to create a <b>balloon tooltip</b> like this one, just include the JavaScript plugin "tip_balloon.js" into your page and apply the BALLOON command to the tooltip.</span>
<br> <br>
This Tooltip DHTML Library is even capable of
dynamically converting arbitrary HTML elements to tooltips,
which means you can put really important stuff into
tooltips, since HTML content is relevant to web search engines.
<a href="#docu" onmouseover="Tip('An HTML element can be converted to a tooltip just by its ID. See <a href=#docu>documentation<\/a>.', TITLE, 'Extended Possibilities', WIDTH, 300, SHADOW, true, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true)" onmouseout="UnTip()">Documentation</a>.
</td>
</tr>
<tr>
<td>
<big> <br> <br><a name="browser"> </a> <br><b>Cross Browser</b></big>
</td>
<td><br></td>
</tr>
<tr>
<td>
This Tooltip JavaScript works in allmost all browsers,
except of ancient browsers which nobody is using anymore (Netscape 4,
Opera 5/6).
Supported browsers:
Gecko Browsers (Firefox, Mozilla, Netscape 6+,
Galeon and others),
IE 5+, Opera 7+, Konqueror, Safari.
<br> <br>
In Opera, this Tooltip Library suppresses even the
native, operating-system-based tooltips that would normally pop up over
links, and
<a href="javascript:void(0);" onmouseover="Tip('<img src=\'../images/tooltip/operatooltip.gif\' border=\'0\' height=\'162\' width=\'500\'>', WIDTH, 500, BGCOLOR, '#FFFFFF', TITLE, 'Native OS-based tooltips over links in Opera')" onmouseout="UnTip()">cover any page content beneath them</a>.
</td>
<td><br></td>
</tr>
<tr>
<td>
<big> <br> <br> <br><a name="docu"> </a> <br><b>How To Use The Script</b></big>
</td>
<td><br></td>
</tr>
<tr>
<td>
<b><big>1.</big> Download the library</b>
<br>
<a onmouseover="MyTip('download')" onmouseout="UnTip()" href="#download">Download wz_tooltip.js</a> and unzipp it.
</td>
<td rowspan="3" width="150" valign="top" align="center">
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltips via JavaScript" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#features" onmouseover="MyTip('features')" onmouseout="UnTip()">Features</a>
<br> <br>
<a href="#browser" onmouseover="MyTip('browser')" onmouseout="UnTip()">Cross Browser</a>
<br> <br>
<a href="#docu" onmouseover="MyTip('docu')" onmouseout="UnTip()">Documentation</a>
<br> <br>
<a href="#extensions" onmouseover="MyTip('extensions')" onmouseout="UnTip()">Extensions</a>
<br> <br>
<a href="#download" onmouseover="MyTip('download')" onmouseout="UnTip()">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<b> <br> <br><big>2.</big> Link wz_tooltip.js into the html file</b>
<br>
Copy the following line to <b style="color:#ff0000;">inside the BODY section</b>,
<a href="javascript:void(0)" onmouseover="TagToTip('T2TBegBody', WIDTH, 300)" onmouseout="UnTip()">preferably</a>
immediately after the opening <body> tag:
</td>
</tr>
<tr>
<td>
<table class="sample">
<tbody><tr>
<td>
<tt><font class="tt" size="2"><script type="text/javascript" src="wz_tooltip.js"></script></font></tt>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
If necessary, adapt the path 'src="wz_tooltip.js"' to the JavaScript file.
<strong>Note: Use the downloaded file only</strong>, do not hardlink wz_tooltip.js from my site.
<span id="T2TBegBody" style="display: none;">Including
the script at the beginning of the body section ensures that the
tooltips are almost immediately functional, before loading the page has
been finished.</span>
<b> <br> <br><big>3.</big> Specify tooltip text inside onmouseover eventhandlers</b>
<br>
Each of the html tags to display a tooltip requires an onmouseover and an onmouseout attribute like so:
</td>
<td><br></td>
</tr>
<tr>
<td>
<table class="sample">
<tbody><tr>
<td>
<tt><font class="tt" size="2"><a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()">Homepage</font></tt>
<tt><font class="tt" size="2"></a></font></tt>
</td>
</tr>
</tbody></table>
</td>
<td><br></td>
</tr>
<tr>
<td>
That's all.
No title attributes, no container DIV.
As you can see, the text to be displayed must be enclosed with single quotes, and be passed to a function <tt>Tip()</tt>.
<b>Attention:</b> Single quotes (apostrophes) inside the tooltip text each must be masked with a backslash.
Example:<br>
<tt>Tip('This text won<b style="color:#dd0000;">\'</b>t trigger a JavaScript error.');</tt>
<br> <br>
The call of <tt>UnTip()</tt> in the onmouseout eventhandler is to hide the tooltip again.
<br> <br>
Of course you may also use different eventhandlers for <tt>Tip()</tt> and/or <tt>UnTip()</tt>.
</td>
<td><br></td>
</tr>
<tr>
<td>
<br> <br> <br><b><big>4.</big> Doesn't Work?</b>
<br>
<b>a)</b> Check the (dynamically generated?) HTML and the CSS of the page, preferably with the W3C Online Validator at <a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a>.
DOM errors will probably break the script.
<br>
<b>b)</b>
Verify that you've exactly followed <a href="#docu">steps 1 to 3</a> on how to include the script, and everything mentioned under "Extended Configuration" further down this page.
<br>
<b>c)</b>
Watch the JS Error Console of your browser.
If there are errors, you can be sure that either the
script hasn't been included correctly, or that there are syntax or
logical errors in your own JS lines, or in some other script included
into the page.
<br>
<b>d)</b>
<b>Please don't claim you've found a bug</b>
- unless you've checked everything very carefully, and you're absolutely sure.
Please understand that I like developing code much more than debugging other peoples' web pages.
Feedback is welcome, of course!
</td>
<td><br></td>
</tr>
<tr>
<td>
<big> <br> <br> <br> <br><b>Extended Configuration</b></big>
</td>
<td><br></td>
</tr>
<tr>
<td>
<b><big>5.</big> Alternative: Convert HTML element to tooltip</b>
<br>
Instead of defining the tooltip text directly, you can
specify an arbitrary HTML element to be converted to a tooltip.
This is advantageous in some aspects:
<ul>
<li>You can have really important stuff in tooltips,
since HTML content (unlike JavaScript content) of a page is relevant to
web search engines.</li>
<li>If placed conveniently in the page, the content is also available for users who have disabled JavaScript.</li>
<li>Optionally, the HTML element can even stay
visible; for example, if you want to display its content in a tooltip at
a different location.</li>
<li>It may be easier to define complex inner tooltip
HTML directly in the HTML element to be converted, rather than in a
JavaScript string.</li>
</ul>
<br>
To define a tooltip to be created from an HTML element,
just pass the ID of the desired HTML tag to the function <tt>TagToTip()</tt>.
Example:
</td>
<td><br></td>
</tr>
<tr>
<td>
<table class="sample">
<tbody><tr>
<td>
<tt><font class="tt" size="2"><a href="index.htm" onmouseover="TagToTip('Span2')" onmouseout="UnTip()">Home page</font></tt>
<tt><font class="tt" size="2"></a></font></tt>
<br>
...
<br>
<tt><font class="tt" size="2"><span id="Span2">This is some comment<br>about my home page</span></font></tt>
<br>
...
</td>
</tr>
</tbody></table>
</td>
<td><br></td>
</tr>
<tr>
<td>
In this example, the tooltip over the link will display
the content grabbed from the <span> element.
Note that only the inner content including the linebreak
tag will be copied, whilst the SPAN tag itself and any formatting
applied to it will not be inherited.
<br> <br>
While the page is loading, the Tooltip Library hides
automatically HTML elements to be converted to tooltips (e.g. the
<span> element in the example above).
To disable this auto-hide feature, set the variable <tt>TagsToTip</tt> in the global tooltip configuration in wz_tooltip.js to the value false
(preset default: true).
If desired, you must hide those HTML elements yourself, by setting their CSS 'display' property to 'none'.
<br> <br>
As a side note: Especially in IE, page loading performance might benefit from disabling the auto-hide feature.
</td>
<td rowspan="2" width="150" align="center">
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltips per JavaScript" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#features" onmouseover="MyTip('features')" onmouseout="UnTip()">Features</a>
<br> <br>
<a href="#browser" onmouseover="MyTip('browser')" onmouseout="UnTip()">Cross Browser</a>
<br> <br>
<a href="#docu" onmouseover="MyTip('docu')" onmouseout="UnTip()">Documentation</a>
<br> <br>
<a href="#extensions" onmouseover="MyTip('extensions')" onmouseout="UnTip()">Extensions</a>
<br> <br>
<a href="#download" onmouseover="MyTip('download')" onmouseout="UnTip()">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<b> <br> <br><big>6.</big> HTML inside tooltips</b>
<br>
For <i>images</i> inside the tooltip, the width and height attributes in the <img> tags must be specified.
This enables the script to determine the tooltip size correctly.
<br> <br>
<i>Doublequotes</i> within the tooltip text must be written as HTML character entity (&quot;),
since doublequotes serve already as delimiters for the onmouseover eventhandler, and cannot be nested.
<i>Apostrophes (singlequotes)</i> must be masked with a preceding backslash, since apostophes serve already as delimiters for the tooltip text.
As <i>delimiters for HTML tag attributes</i> inside the tooltip text, you can use either &quot; or \' .
Example:
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table cellpadding="3">
<tbody><tr>
<td align="left">
<table class="sample">
<tbody><tr>
<td>
<b>Correct:</b>
<br>
<tt class="tt">
<a href="index.htm"
</tt>
<tt class="tt">
onmouseover="Tip('Text with <img src=<b style="color:#dd0000;">\'</b>pics/image.jpg<b style="color:#dd0000;">\'</b> width=<b style="color:#dd0000;">\'</b>60<b style="color:#dd0000;">\'</b>>image.')"
</tt>
<tt class="tt">
onmouseout="UnTip()">
</tt>
<tt class="tt">
Homepage </a>
</tt>
<br>
or
<br>
<tt class="tt">
<a href="index.htm"
</tt>
<tt class="tt">
onmouseover="Tip('Text with <img src=<b style="color:#dd0000;">&quot;</b>pics/image.jpg<b style="color:#dd0000;">&quot;</b> width=<b style="color:#dd0000;">&quot;</b>60<b style="color:#dd0000;">&quot;</b>>image.')"
</tt>
<tt class="tt">
onmouseout="UnTip()">
</tt>
<tt class="tt">
Homepage </a>
</tt>
<br> <br>
<b>Wrong:</b>
<br>
<tt class="tt">
<a href="index.htm"
</tt>
<tt class="tt">
onmouseover="Tip('Text with <img src=<b style="color:#dd0000;">"</b>pics/image.jpg<b style="color:#dd0000;">"</b> width=<b style="color:#dd0000;">"</b>60<b style="color:#dd0000;">"</b>>image.')"
</tt>
<tt class="tt">
onmouseout="UnTip()">
</tt>
<tt class="tt">
Homepage </a>
</tt>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table cellpadding="3">
<tbody><tr>
<td width="150"><br></td>
<td align="left">
<table>
<tbody><tr>
<td>
<b> <br> <br><big>7.</big> Formatting tooltips with CSS classes</b>
<br>
Simply wrap the tooltip text in a DIV or SPAN element of
the desired CSS class.
You can do the same with the title text (for how to
define a tooltip title, see the description of the TITLE command in the
commands reference below).
Example:
<br>
<table class="sample">
<tbody><tr>
<td>
<tt><font class="tt" size="2">... onmouseover="Tip('<div class=&quot;TipCls1&quot;>Text of tooltip number one</div>')" ...</font></tt>
<br>
<tt><font class="tt" size="2">... onmouseover="Tip('<span class=\'TipCls2\'>Text of tooltip number two</span>')" ...</font></tt>
<br>
<tt><font class="tt" size="2">... onmouseover="Tip('Tooltip number 3', TITLE, '<div class=\'TitleCls\'>Some Title</div>')" ...</font></tt>
</td>
</tr>
</tbody></table>
</td>
<td><br></td>
</tr>
<tr>
<td>
<b> <br> <br><big>8.</big> Tooltip content via variable or function call</b>
<br>
Instead of a string enclosed with single quotes, <tt>Tip()</tt>
accepts as well a variable or a call to a function defined elsewhere,
for instance in a <script> block or in a separate JS file.
The same is true for commands passed to <tt>Tip()</tt> or <tt>TagToTip()</tt> (listing and description of commands see below).
Thus, each time a tooltip is about to be displayed, its content and formatting could be established dynamically.
<br>Example:
<br>
<table class="sample">
<tbody><tr>
<td>
<tt class="tt">
<html>
<br>
<head>
<br>
...
<br>
<script type="text/javascript">
<br>
<font style="color:#dd0000;">var txt1 = "This is the text of the first tooltip";
<br>
<br>
function TooltipTxt(n)
<br>
{
<br>
return "This is the text of the " + n + " tooltip";
<br>
}</font>
<br>
</script>
<br>
</head>
<br>
<body>
<br>
<script type="text/javascript" src="wz_tooltip.js"></script>
<br>
...
<br>
<a href="a.htm" <font style="color:#dd0000;">onmouseover="Tip(txt1)"</font> onmouseout="UnTip()">Link 1</a>
<br>
...
<br>
<a href="b.htm" <font style="color:#dd0000;">onmouseover="Tip(TooltipTxt('second'))"</font> onmouseout="UnTip()">Link 2</a>
<br>
...
<br>
<a href="c.htm" <font style="color:#dd0000;">onmouseover="Tip(TooltipTxt('third'))"</font> onmouseout="UnTip()">Link 3</a>
<br>
...
<br>
</body>
<br>
</html>
</tt>
</td>
</tr>
</tbody></table>
</td>
<td rowspan="2" width="150" align="center">
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltips per JavaScript" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#features" onmouseover="MyTip('features')" onmouseout="UnTip()">Features</a>
<br> <br>
<a href="#browser" onmouseover="MyTip('browser')" onmouseout="UnTip()">Cross Browser</a>
<br> <br>
<a href="#docu" onmouseover="MyTip('docu')" onmouseout="UnTip()">Documentation</a>
<br> <br>
<a href="#extensions" onmouseover="MyTip('extensions')" onmouseout="UnTip()">Extensions</a>
<br> <br>
<a href="#download" onmouseover="MyTip('download')" onmouseout="UnTip()">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<b> <br> <br><big>9.</big> Commands to customize tooltips individually</b>
<br>
The global default configuration, taking effect on all
tooltips, can be changed in the JavaScript file itself, in the section
"GLOBAL TOOLTIP CONFIGURATION".
To configure tooltips individually, you can use the
commands listed below.
These individual commands override the global
configuration in wz_tooltip.js.
They can be passed to the Tip() or TagToTip() function
calls in the onmouseover eventhandlers.
Each command must be accompanied by the desired value,
separated by a comma:
<br>
<table class="sample">
<tbody><tr>
<td>
<tt><font class="tt" size="2">onmouseover="Tip('Some text', ABOVE, true)"</font></tt>
<br>
or
<br>
<tt><font class="tt" size="2">onmouseover="TagToTip('SomeID', TITLEFONTCOLOR, '#CCFFCC')"</font></tt>
</td>
</tr>
</tbody></table>
<br>
Multiple commands form a comma-separated list of command-value pairs.
Order of commands is arbitrary. Example:
<br>
<table class="sample">
<tbody><tr>
<td>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some tooltip text', SHADOW, true, TITLE, 'Some Title', PADDING, 9)"</font></tt>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>
<table>
<tbody><tr>
<td width="50"><br></td>
<td align="left">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000099">
<tbody><tr>
<td>
<table cellspacing="1" cellpadding="6" border="0">
<tbody><tr bgcolor="#eeeeee">
<th align="left">Command</th>
<th align="left">Description</th>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tooltip positioned above mouse pointer', ABOVE, true);" onmouseout="UnTip()">ABOVE</a></tt>
</td>
<td>
Positions the tooltip above the mousepointer.
Value: true or false.
<br> <br>
Combine with
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('These commands have been applied:<br>ABOVE, true, OFFSETY, 50', ABOVE,true,OFFSETY,50);" onmouseout="UnTip()">OFFSETY</a></tt>
to adjust the vertical distance from the mousepointer,
or with
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('These commands have been applied:<br>ABOVE, true, CENTERMOUSE, true', ABOVE, true, CENTERMOUSE, true, OFFSETX, 0);" onmouseout="UnTip()">CENTERMOUSE</a></tt>
to center the tooltip horizontally above the mousepointer.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Changed background color', BGCOLOR,'#f3e0f3');" onmouseout="UnTip()">BGCOLOR</a></tt>
</td>
<td>
Background color of the tooltip.
Value: HTML color, in single quotes, e.g. '#D3E3F6' or 'DarkCyan',
or empty string <tt>''</tt> for
<tt><a class="nodeco" href="javascript:void(0)" onmouseover="Tip('This tooltip has neither a background<br>nor a border', BORDERWIDTH, 0, BGCOLOR, '', FONTWEIGHT, 'bold', FONTCOLOR, '#00AA00')" onmouseout="UnTip()">no background</a></tt>.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', BGCOLOR, '#D3E3F6')"</font></tt>
<br>or<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', BGCOLOR, '')"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tooltip with background image', BGIMG, '../images/tooltip/tt_bg.jpg', PADDING, 10, WIDTH, 180);" onmouseout="UnTip()">BGIMG</a></tt>
</td>
<td>
Background image.
Value: Path to image, in single quotes.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', BGIMG, '../images/tipbackground.gif')"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered border color', BORDERCOLOR, '#dd00aa');" onmouseout="UnTip()">BORDERCOLOR</a></tt>
</td>
<td>
Border color.
Value: HTML color, in single quotes, e.g. '#dd00aa'.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Dashed border style', BORDERSTYLE, 'dashed', PADDING, 8);" onmouseout="UnTip()">BORDERSTYLE</a></tt>
</td>
<td>
Border style.
Value: CSS border style, in single quotes.
Recommend are 'solid' (default), 'dashed' or 'dotted', others may not work in all browsers.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Width of tooltip border', BORDERWIDTH, 5);" onmouseout="UnTip()">BORDERWIDTH</a></tt>
</td>
<td>
Width of tooltip border.
Value: Integer ≥ 0. Default is 1. Use 0 for no border.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', BORDERWIDTH, 2)"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td align="right">
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Centered beneath the mouse', CENTERMOUSE, true, OFFSETX, 0, OFFSETY, 22);" onmouseout="UnTip()">CENTERMOUSE</a></tt>
</td>
<td>
Centers the tooltip horizontally beneath (or above) the mousepointer.
Value: true or false.
Consider that the tooltip is offset from the center by the value globally set in wz_tooltip.js (<tt>config. OffsetX</tt>), or as specified by the OFFSETX command.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', CENTERMOUSE, true, OFFSETX, 0)"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This tooltip is "sticky", but it can be closed by clicking into the tooltip or document, since the command CLICKCLOSE, true has been applied.', CLICKCLOSE, true, STICKY, true, WIDTH, 300);" onmouseout="UnTip()">CLICKCLOSE</a></tt>
</td>
<td>
Closes the tooltip once the user clicks somewhere inside the tooltip or into the document.
Value: true, false.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Make this tooltip sticky by clicking onto the link', CLICKSTICKY, true);" onmouseout="UnTip()">CLICKSTICKY</a></tt>
</td>
<td>
Enables the user to fixate the tooltip, by just
clicking onto the HTML element (e.g. link) that triggered the tooltip.
This might help the user to read the tooltip more
conveniently.
Value: true, false.
<br> <br>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Click the link to make this tooltip sticky. To close the tooltip when it\'s fixated, click somewhere.', TITLE, 'CLICKSTICKY & CLICKCLOSE & CLOSEBTN', CLICKSTICKY, true, CLICKCLOSE, true, CLOSEBTN, true, WIDTH, -1)" onmouseout="UnTip()">onmouseover="Tip('Text', CLICKSTICKY, true, CLICKCLOSE, true, CLOSEBTN, true)"</a></tt>
<br>
In this example, additionally specifying
CLICKCLOSE enables the user to close the tooltip with just another click
somewhere into the document.
Redundantly provided is a closebutton.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Closebutton in the titlebar', CLOSEBTN, true, STICKY, true);" onmouseout="UnTip()">CLOSEBTN</a></tt>
</td>
<td>
Displays a closebutton in the titlebar.
Value: true, false.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered closebutton colors', CLOSEBTN, true, STICKY, true, CLOSEBTNCOLORS, ['#7799cc', '#ffaaaa', '#ffffff', '#ff0000']);" onmouseout="UnTip()">CLOSEBTNCOLORS</a></tt>
</td>
<td>
Colors used for the closebutton.
<br> <br>
Value must be a comma-separated array of 4 color
values.
Each color in single quotes.
The entire array must be enclosed with a pair of
square brackets, see example below, since it's actually a single
parameter.
The 4 colors have the following meanings:
<br>
1. Background color
<br>
2. Text color
<br>
3. Highlighted background, while the button is being hovered
<br>
4. Hilighted text color, while the button is being hovered
<br>
For each of these colors, you can also specify an empty string <tt>''</tt>,
in which case the title background, or title text color, respectively, is used for that button state.
<br> <br>
Example:<br>
<tt><font class="tt" size="2">Tip('Text', CLOSEBTN, true, CLOSEBTNCOLORS, ['', '#66ff66', 'white', '#00cc00'], STICKY, true)</font></tt>
<br>
In this example, the first color value (background color) is an empty string.
Therefore the closebutton inherits the titlebar background.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered closebutton text', CLOSEBTN, true, STICKY, true, CLOSEBTNTEXT, 'Click Me');" onmouseout="UnTip()">CLOSEBTNTEXT</a></tt>
</td>
<td>
Text in the closebutton.
Value must be enclosed with single quotes.
Example:
<br>
<tt><font class="tt" size="2">Tip('Tooltip text', CLOSEBTN, true, CLOSEBTNTEXT, 'Click Me', STICKY, true)</font></tt>
<br>
Globally preset in wz_tooltip.js is
'&nbsp;X&nbsp;' - the whitespace entities '&nbsp;' add some
horizontal padding to the button.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="TagToTip('T2tDirect', COPYCONTENT, false, PADDING, 0, BORDERWIDTH, 0, WIDTH, 280);" onmouseout="UnTip()">COPYCONTENT</a></tt>
<div id="T2tDirect" style="position: relative; top: 50px; display: none;">
Actually, this DIV was embedded right into the
HTML of the document, but it has been temporarily converted to a
tooltip.
</div>
</td>
<td>
COPYCONTENT has only effect on tooltips created with <tt>TagToTip()</tt>, that is, for HTML elements converted to tooltips.
<br>
Value: true, false.
<br>
If true (this is the default behaviour preset in
wz_tooltip.js), just a copy of the text (or inner HTML) of the HTML
element is inserted into the tooltip.
If false, the entire HTML element (its DOM node)
by itself is temporarily converted to a tooltip, which may be useful in
the following aspects:
<br>
1.) If the HTML element converted to a tooltip
contains a form with inputs, their current user input will be maintained
even while the tooltip is not displayed.
<br>
2.) The tooltip inherits the style properties of the HTML element.
<br>
Example how to convert an HTML element entirely to a tooltip, by applying COPYCONTENT with the value <tt>false</tt>:
<br>
<tt><font class="tt" size="2">TagToTip('SomeID', COPYCONTENT, false, BORDERWIDTH, 0, PADDING, 0)</font></tt>
<br>
Moreover, this example turns off the native
tooltip border (BORDERWIDTH, 0),
and sets the native tooltip padding to zero, so
only the padding and border defined for the HTML element itself are
displayed.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
</td>
<td>
Tooltip shows up after the specified timeout, in milliseconds.
A behavior similar to OS based tooltips.
<br>
Value:
Integer ≥ 0. Use 0 for no delay.
In wz_tooltip.js preset and recommended is 400.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', DELAY, 1000)"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Lifetime of this tip has been limitd to 2500 milliseconds', DURATION, 2500);" onmouseout="UnTip()">DURATION</a></tt>
</td>
<td>
Time span, in milliseconds, until the tooltip is hidden,
even if the <tt>STICKY</tt> command has been applied,
or even if the mouse is still on the HTML element that has triggered the tooltip.
<br>
Value: Integer.
Use 0 for no limitation (this is the default).
<br> <br>
A negative value has a different meaning:
<tt><a class="nodeco" href="javascript:void(0)" onmouseover="Tip('This one hides with some delay after the mouse has left the link. Additionally, it doesn\'t follow the mouse, and fade-in and fade-out animation has been applied with the FADEIN and FADEOUT commands.', DURATION, -2000, FOLLOWMOUSE, false, FADEIN, 400, FADEOUT, 400, WIDTH, 300)" onmouseout="UnTip()">It specifies a duration</a></tt>,
in milliseconds, <i>starting with the onmouseout</i> until the tooltip is hidden.
In other words, a negative value makes tooltip hide with some delay, rather than immediately.
Especially useful for tooltips that don't follow the movements of the mouse (FOLLOWMOUSE, false).
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Even if another HTML element that contains a tooltip is being hovered, this tooltip won\'t be closed. You must close it actively.', EXCLUSIVE, true, TITLE, 'EXCLUSIVE', STICKY, true, CLOSEBTN, true, WIDTH, 280);" onmouseout="UnTip()">EXCLUSIVE</a></tt>
</td>
<td>
No other tooltip can be displayed until this one
has been closed actively by the user.
Value: true, false.
Makes only sense for sticky tooltips (STICKY
command).
Of course, you must also provide the CLOSEBTN
or/and CLICKCLOSE command to give the user a means to close the tooltip.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Fade-in animation', FADEIN, 1000, PADDING, 10);" onmouseout="UnTip()">FADEIN</a></tt>
</td>
<td>
Fade-in animation.
The value (integer ≥ 0) specifies the duration of the animation, in milliseconds.
0 for no animation.
<br> <br>
Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror.
These fall back to normal, non-animated behaviour.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Fade-out animation', FADEOUT, 1000, PADDING, 10);" onmouseout="UnTip()">FADEOUT</a></tt>
</td>
<td>
Fade-out animation.
The value (integer ≥ 0) specifies the duration of the animation, in milliseconds.
0 for no animation.
Recommended: combine with
<tt><a class="nodeco" href="javascript:void(0)" onmouseover="Tip('On another fast trip in Bavaria<br><img src=\'../images/ko5obersoech.jpg\' width=\'180\' height=\'115\' \/>', FADEIN, 800, FADEOUT, 800, TEXTALIGN, 'center', BGCOLOR, '#ffffff')" onmouseout="UnTip()">FADEIN</a></tt>.
Note that a small animation duration of 100 ms (recommended) is globally preset in wz_tooltip.js.
<br> <br>
Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror.
These fall back to normal, non-animated behaviour.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Tooltip at fixed position', FIX, FixCalcXY(this));" onmouseout="UnTip()">FIX</a></tt>
<br>
Mode 1: Fixed x and y coordinates.
</td>
<td>
Shows the tooltip at the fixed coordinates [x, y].
Value: Two comma-separated integers in square brackets.
<br>
Example:<br>
<tt>onmouseover="Tip('Some text', FIX, [230, 874])"</tt>
<br>
You can also call function(s) defined elsewhere that calculate the coordinates dynamically:
<br>
<tt>onmouseover="Tip('Text', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)"</tt>
<br>
or
<br>
<tt>onmouseover="Tip('Text', FIX, CalcFixXY(), ABOVE, true)"</tt>
<br>
In the latter example, the function CalcFixXY() must return an array containing the two numbers.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Tooltip positioned at the <strong>bottom</strong> edge of the light-purple SPAN element', FIX, ['PurpleSpan', 0, 0], WIDTH, 200);" onmouseout="UnTip()">FIX</a></tt>
<br>
Mode 2: Fixed position at a certain HTML element.
</td>
<td>
Displays the tooltip at any desired <span id="PurpleSpan" style="background:#ffcccc;">HTML element</span>
- optionally even a different one than Tip() is called from.
Value: Three comma-separated values in square
brackets.
The first value specifies the HTML element to
display the tooltip at, either by its ID (string, in single quotes), or
by a direct reference (no quotes).
The second and third value (integers) define the
horizontal and vertical offset of the tooltip from the left-bottom
corner of the HTML element.
<br> <br>
Example 1, ID of HTML element:
<table class="sample">
<tbody><tr>
<td>
<tt>... onmouseover="Tip('Some text', FIX, ['PurpleSpan', 0, 5])"</tt>
<br>
<tt>...</tt>
<br>
<tt><span id="PurpleSpan">HTML element to show the tooltip on</span></tt>
</td>
</tr>
</tbody></table>
This code snippet lets the tooltip appear 5 pixels below the bottom edge of the SPAN element.
<br> <br>
Example 2, direct reference to HTML element:
<table class="sample">
<tbody><tr>
<td>
<tt><a href="..." onmouseover="Tip('Some text', FIX, [this, 0, 5], ABOVE, true)"</tt>
<tt>onmouseout="UnTip()">Link</a></tt>
</td>
</tr>
</tbody></table>
This code snippet displays the tooltip directly at
the HTML element (link) hovered with the mouse.
As reference, we use the JavaScript keyword this -
which automatically points to the HTML element the JavaScript
eventhandler (e.g. onmouseover) stands in.
Additionally, the ABOVE command is used in order
<tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Tooltip positioned at the <strong>top</strong> edge of the hovered HTML element', FIX, [this, 0, 0], WIDTH, 200, ABOVE, true);" onmouseout="UnTip()">to place the tooltip at the top edge</a></tt>
of the HTML element.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This tooltip doesn\'t follow the movements of the mouse since we\'ve applied the FOLLOWMOUSE command with the value false', FOLLOWMOUSE, false, WIDTH, 300);" onmouseout="UnTip()">FOLLOWMOUSE</a></tt>
</td>
<td>
The tooltip follows the movements of the mouse.
Value: true, false. Default: true.
<br> <br>
When turning this off by applying the value false,
the tooltip behaves like OS-based tooltips, which usually don't follow the mouse.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered font color', FONTCOLOR, '#ff0000');" onmouseout="UnTip()">FONTCOLOR</a></tt>
</td>
<td>
Font color.
Value: HTML color, in single quotes, e.g. '#990099'
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Changed font face', FONTFACE, 'Courier New, Courier, mono');" onmouseout="UnTip()">FONTFACE</a></tt>
</td>
<td>
Font face (font family).
<br>
Value:
As you'd specify it in HTML or CSS, enclosed with single quotes, e.g.
<tt>Tip('Some text', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '12pt')</tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Oops...', FONTSIZE, '72pt');" onmouseout="UnTip()">FONTSIZE</a></tt>
</td>
<td>
Font size.
Value: Size with unit, in single quotes.
Unit ('px', 'pt', 'em' etc.) is mandatory.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('FONTWEIGHT, \'bold\'', FONTWEIGHT, 'bold');" onmouseout="UnTip()">FONTWEIGHT</a></tt>
</td>
<td>
Font weight.
Value: 'normal' or 'bold', in single quotes.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
</td>
<td>
Height of the tooltip body, without title, shadows etc..
Value: Any integer.
<br>
If 0 (the preset default), the height is automatically adapted to the content of the tooltip.
A negative number (e.g. -100) specifies a maximum limit for the automatic adaption
(in this example the height won't ever go beyond 100 pixels).
<br> <br>
Note that the tooltips follow the W3C box model,
which means that the specified height applies to
the actual content of the tooltip only,
excluding padding (see PADDING command), border
and shadow.
If the height of the tooltip content exceeds the
specified height, the tooltip is featured with a vertical scrollbar.
Therefore, make sure that such tooltips of limited
height are sticky (see STICKY command), so your visitors are given the
chance to scroll the tooltip content.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Jumping', JUMPHORZ, true, LEFT, true);" onmouseout="UnTip()">JUMPHORZ</a></tt>
</td>
<td>
Value: true, false.
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('When touching the right window boundary, this one jumps to the other side of the mouse. Just resize the window until it\'s narrow enough to test this effect.', JUMPHORZ, true, WIDTH, 200);" onmouseout="UnTip()">Test again.</a></tt>
<br>
If true: When touching the window boundary, the tooltip jumps horizontally to the other side of the mouse.
<br>
If false (preset default in wz_tooltip.js): The tooltip just stops by the right (or left) window boundary.
In either case, the tooltip is prevented from extending past the window boundary.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('For this tooltip, JUMPVERT has been turned off (set to false), so, when touching the bottom window boundary, the tooltip won\'t jump vertically to the other side of the mouse', JUMPVERT, false, WIDTH, 200, FONTSIZE, '12pt');" onmouseout="UnTip()">JUMPVERT</a></tt>
</td>
<td>
When it touches the bottom (or top) window
boundary, the tooltip jumps vertically to the other side of the mouse.
<br>
Value: true, false.
This behaviour is on (true) by default (preset in wz_tooltip.js).
<br> <br>
<strong>Important:</strong>
At least either JUMPVERT or JUMPHORZ behaviour, or
both, should be true,
so the mouse cannot enter the tooltip and thus
trigger an onmouseout event when the tooltip is simultaneously stopped
by a vertical and horizontal window boundary.
Recommended and preset in wz_tooltip.js: JUMPVERT
true, JUMPHORZ false.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td align="right">
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('On the other side', LEFT, true);" onmouseout="UnTip()">LEFT</a></tt>
</td>
<td>
Tooltip positioned on the left side of the mousepointer.
Value: true, false.
<br>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('LEFT and ABOVE combined...', LEFT, true, ABOVE, true);" onmouseout="UnTip()">LEFT and ABOVE commands combined</a></tt>.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', LEFT, true, ABOVE, true)"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Increased horizontal offset from the mouse', OFFSETX, 150);" onmouseout="UnTip()">OFFSETX</a></tt>
</td>
<td>
Horizontal offset from mouse-pointer.
Value: Any integer. May also be negative.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Increased vertical distance from the mouse', OFFSETY, 70);" onmouseout="UnTip()">OFFSETY</a></tt>
</td>
<td>
Vertical offset from the mouse-pointer.
Value: Any integer. May also be negative.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('A semi-transparent Tooltip', OPACITY, 70, PADDING, 14);" onmouseout="UnTip()">OPACITY</a></tt>
</td>
<td>
Transparency of tooltip.
Value: Integer between 0 (fully transparent) and 100 (opaque, no transparency).
<br> <br>
Opacity is the opposite of transparency, i.e.<br>
opacity = 100 - transparency (in percent).<br>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('<img src=../images/dragdrop/fateba_fi.jpg width=130 height=103><br>Tooltip with image, shadow, background image and fade-in/fade-out animation.', WIDTH, 180, OPACITY, 80, TEXTALIGN, 'center', TITLEALIGN, 'center', SHADOW, true, TITLE, 'Nifty', BGIMG, '../images/tooltip/tt_bg.jpg', FADEIN, 700, FADEOUT, 700);" onmouseout="UnTip()">Another example</a></tt>
with image (taken on my 9000-km / 5500-miles
recumbent bicycle trip Hamburg-Northcape-Munich), shadow via SHADOW
command, content centered using TEXTALIGN, background image via BGIMG
and animation via FADEIN and FADEOUT commands.
<br> <br>
Not supported in Opera prior to v.9.0, old versions of Safari and some versions of Konqueror.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tip with plenty of padding around its content', PADDING, 30);" onmouseout="UnTip()">PADDING</a></tt>
</td>
<td>
Inner spacing of tooltip, between border and content.
Value: Integer ≥ 0.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('SHADOW, true', SHADOW, true);" onmouseout="UnTip()">SHADOW</a></tt>
</td>
<td>
Tooltip drops a shadow.
Value: true, false
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This one drops a shadow (SHADOW command),<br>and its shadow color has been changed (SHADOWCOLOR command)', PADDING, 8, SHADOW, true, SHADOWCOLOR, '#dd99aa');" onmouseout="UnTip()">SHADOWCOLOR</a></tt>
<!--br>
<form> <select><option>aaa</option><option>bbb</option><option>ccc</option></select></form-->
</td>
<td>
Shadow color.
Value: HTML color, in single quotes.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', SHADOW, true, SHADOWCOLOR, '#dd99aa')"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Increased shadow width', SHADOW, true, SHADOWWIDTH, 10, PADDING, 8);" onmouseout="UnTip()">SHADOWWIDTH</a></tt>
</td>
<td>
Shadow width (offset).
Value: Integer ≥ 0.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', SHADOW, true, SHADOWWIDTH, 7)"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('STICKY, true<ul><li style=\'font-family:Verdana,Geneva,sans-serif;font-size:8pt;\'><a href=#top>Top of page<\/a><\/li><li style=\'font-family:Verdana,Geneva,sans-serif;font-size:8pt;\'><a href=\'#docu\'>Begin of documentation<\/a><\/li><\/ul>', STICKY, true, CLICKCLOSE, true, PADDING, 6);" onmouseout="UnTip()">STICKY</a></tt>
</td>
<td>
The tooltip stays fixed at its initial position until another tooltip pops up.
Value: true, false.
<br> <br>
With
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('STICKY, true, DURATION, 2500<br>This tip is sticky, but its lifetime has been limited to 2.5 seconds.', STICKY, true, CLICKCLOSE, true, DURATION, 2500, WIDTH, 280)" onmouseout="UnTip()">DURATION</a></tt>
you can enforce the tooltip to disappear after a certain time span.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('The TEXTALIGN command takes as values either \'right\', \'center\', \'justify\' or \'left\', the latter being unnecessary since it is the default value.', WIDTH, 200, TITLE, 'Right-Aligned Text', TEXTALIGN, 'right');" onmouseout="UnTip()">TEXTALIGN</a></tt>
</td>
<td>
Aligns the text in the body of the tooltip.
Value: 'right', 'center',
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('<img align=\'right\' src=\'..\/images\/dragdrop\/muckl.jpg\' width=\'100\' height=\'130\'>This is some quite lengthy text which demonstrates the justification effect which can be achieved by sending the TEXTALIGN command with the \'justify\' value. Note that text justification is not recommended for text that consists of relatively short lines - as is also the case in this tooltip, in particular with the text alongside the Muckl image above.', TITLE, 'Justified text with Muckl', TEXTALIGN, 'justify', WIDTH, 250);" onmouseout="UnTip()">'justify'</a></tt>
or 'left'.
<br>Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', TEXTALIGN, 'right')"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLE, \'Some title\'', TITLE, 'Some title');" onmouseout="UnTip()">TITLE</a></tt>
</td>
<td>
Displays a titlebar.
Value: Text to display, in single quotes.
May even contain HTML, which gives you additional freedom in fashioning the titlebar.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('The TITLEALIGN command takes as values either \'right\', \'justify\' or \'left\', the latter being unnecessary since it is the default value.', WIDTH, 240, TITLE, 'Right-Aligned Title', TITLEALIGN, 'right');" onmouseout="UnTip()">TITLEALIGN</a></tt>
</td>
<td>
Aligns the text in the titlebar.
Value: 'right', 'center', 'justify' or 'left'
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEBGCOLOR, \'#990099\'', TITLE, 'Title background', TITLEBGCOLOR, '#990099');" onmouseout="UnTip()">TITLEBGCOLOR</a></tt>
</td>
<td>
Backgroundcolor of the titlebar.
Value: HTML color, in single quotes.
If it's an empty string <tt>''</tt>,
the border color (see also BORDERCOLOR command) is used (this is the default).
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTCOLOR, \'#ff6666\'', TITLE, 'Red title', TITLEFONTCOLOR, '#ff6666');" onmouseout="UnTip()">TITLEFONTCOLOR</a></tt>
</td>
<td>
Color of title text.
Value: HTML color, in single quotes.
If it's an empty string <tt>''</tt>, the backgroundcolor of the tooltip body (see also BGCOLOR command) is used (this is the default).
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTFACE, \'Courier New, Courier, mono\'', TITLE, 'Changed Title Font', TITLEFONTFACE, 'Courier New, Courier, mono');" onmouseout="UnTip()">TITLEFONTFACE</a></tt>
</td>
<td>
Font face for title text.
Value: Like in HTML or CSS. Enclosed with single quotes.
If the value is an empty string <tt>''</tt>, the tooltip body font, in boldified form, is used (this is the default).
<br>
Example:
<br>
<tt><font style="font-size:12px;" size="2">onmouseover="Tip('Some text', TITLE, 'Some Title', TITLEFONTFACE, 'Verdana,sans-serif')"</font></tt>
<br>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTSIZE, \'18pt\'', TITLE, 'Big Title', TITLEFONTSIZE, '18pt');" onmouseout="UnTip()">TITLEFONTSIZE</a></tt>
</td>
<td>
Font size of title text.
Value: Size with unit, in single quotes.
Unit ('px', 'pt', 'em' etc.) is mandatory.
If the value is an empty string <tt>''</tt>, the fontsize of the tooltip body is applied.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This tooltip has a caption with<br>plenty of padding', TITLE, 'Padded Title', TITLEPADDING, 8);" onmouseout="UnTip()">TITLEPADDING</a></tt>
</td>
<td>
Padding around the title.
Value: Integer ≥ 0.
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('WIDTH, 200', WIDTH, 200);" onmouseout="UnTip()">WIDTH</a></tt>
</td>
<td>
Width of tooltip.
Value: Any integer.
<br>
If 0 (the preset default), the width is automatically adapted to the content of the tooltip.
A negative number (e.g. -240) specifies a maximum limit for the automatic adaption
(in this example the width won't ever go wider than 240 pixels).
<br> <br>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Despite the lengthy text inside this tooltip, the width of this tooltip is determined by the width of its titlebar. Note that there are no &lt;br&gt; HTML tags inside the text of this tooltip.', WIDTH, -1, TITLE, 'Width Determined By Extent Of Title');" onmouseout="UnTip()">A value of -1 for WIDTH</a></tt>
has a special meaning:
In this case the width of the tooltip is determined by the extent of the title.
That is, the tooltip will be as wide as the title plus, if specified, the closebutton.
<br> <br>
Note that the tooltips follow the W3C box model,
which means that the specified width applies to the actual content of the tooltip,
excluding padding (see PADDING command), border and shadow.
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td width="50"><br></td>
</tr>
</tbody></table>
<table cellpadding="3">
<tbody><tr>
<td width="150" align="center">
<table width="122" cellspacing="3" cellpadding="0">
<tbody><tr>
<td>
</td>
</tr>
</tbody></table>
</td>
<td align="left">
<table>
<tbody><tr>
<td>
<big> <br><a name="extensions"> </a> <br><b>Extensions</b></big>
</td>
<td><br></td>
</tr>
<tr>
<td>
Visit the <a href="http://walterzorn.de/en/tooltip/extensions.htm" onmouseover="TagToTip('T2TExtensions', ABOVE, true, OFFSETX, -17, BALLOON, true)" onmouseout="UnTip()">Extensions page</a> for additional configuration options.
<span id="T2TExtensions" style="display: none;">These <b>plugins</b> provide more configuration options,<br>for example a balloon tooltip style like this.</span>
</td>
<td><br></td>
</tr>
<tr>
<td>
<a name="download"> </a> <br> <br> <br> <br>
<b><big><img src="/js/wz/redarrow.gif" alt="" width="15" height="13">Download</big></b>
<br>
wz_tooltip.js 5.31, published under the <b>LGPL</b>:<br>
<a onmouseover="Tip('Contains wz_tooltip.js')" onmouseout="UnTip()" href="http://walterzorn.de/en/scripts/wz_tooltip.zip">wz_tooltip.zip</a> (16 KB)
<br> <br>
<a href="http://walterzorn.de/en/tooltip/history.htm" onmouseover="Tip('Read this if you\'re not sure about the benefits from an update :-)')" onmouseout="UnTip()">history.htm</a> (Changelog of wz_tooltip.js)
<br> <br>
<div style="padding:5px;border-style:solid;border-width:1px;border-color:#000099;">
<strong>Important notes for users of previous versions</strong>
<br> <br>
Starting with version 5.0, an onmouseout attribute is required for each HTML tag that has a tooltip.
Example:
<br>
<tt><a</tt> <tt>href="index.htm"</tt> <tt>onmouseover="Tip('Some text')"</tt> <tt>onmouseout="UnTip()"></tt> <tt>Home</tt> <tt></a></tt>
<br>
Simply call UnTip() from inside those onmouseout
attributes. See also documentation above.
The additional onmouseout attribute may be a bit less
elegant, but gives you more freedom in specifying the event upon which
to hide a tooltip.
</div>
<br> <br> <br> <br>
<b><big>Old Version</big></b>
For those who are still using a version prior to v.4.0
and want to stay with the old rules of defining tooltips and including
the script:
<br>
<a href="http://walterzorn.de/en/tooltip_old/tooltip_e.htm">Documentation and download of wz_tooltip.js v.3.45</a>
<br> <br> <br> <br>
<b><big>Donation</big></b>
<br>
Financial support for the very numerous hours of
development and for the costs of hosting this website is welcome.<br>
<br> <br> <br> <br>
</td>
<td width="150" valign="top" align="center">
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltips per JavaScript" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#features" onmouseover="MyTip('features')" onmouseout="UnTip()">Features</a>
<br> <br>
<a href="#browser" onmouseover="MyTip('browser')" onmouseout="UnTip()">Cross Browser</a>
<br> <br>
<a href="#docu" onmouseover="MyTip('docu')" onmouseout="UnTip()">Documentation</a>
<br> <br>
<a href="#extensions" onmouseover="MyTip('extensions')" onmouseout="UnTip()">Extensions</a>
<br> <br>
<a href="#download" onmouseover="MyTip('download')" onmouseout="UnTip()">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br> <br> <br> <br> <br> <br> <br><small>Walter Zorn
<br><a href="http://www.kreuzotter.de/impressum.htm">Impressum and about this page</a></small>
<br>
<br> <br> <br> <br>
</center>
</body></html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer