DIR : /home/kozerus/public_html/cropex/js/wz/wz_tooltip.htm
/home/kozerus/public_html/cropex/js/wz
<!DOCTYPE html>
<html><head>
<span id="line2"></span></span><span><<span class="start-tag">html</span>></span><span>
<span id="line3"></span></span><span class="comment"><!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<span id="line4"></span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<span id="line5"></span><html xmlns="http://www.w3.org/1999/xhtml"--></span><span>
<span id="line6"></span></span><span><<span class="start-tag">head</span>></span><span>
<span id="line7"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">expires</a>" <span class="attribute-name">content</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line8"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">content-type</a>" <span class="attribute-name">content</span>="<a class="attribute-value">text/html; charset=iso-8859-1</a>"></span><span>
<span id="line9"></span></span><span><<span class="start-tag">title</span>></span><span>DHTML JavaScript Tooltips</span><span></<span class="end-tag">title</span>></span><span>
<span id="line10"></span></span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/newwalterzorn.css">../newwalterzorn.css</a>"></span><span>
<span id="line11"></span></span><span><<span class="start-tag">style</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>"></span><span>
<span id="line12"></span></span><span><</span><span>!--
<span id="line13"></span>.tt {
<span id="line14"></span> font-size:12px;
<span id="line15"></span>}
<span id="line16"></span>
<span id="line17"></span>.sample {
<span id="line18"></span> border: 1px solid #000099;
<span id="line19"></span> background: #eeeeee;
<span id="line20"></span> padding: 3px;
<span id="line21"></span> }
<span id="line22"></span>
<span id="line23"></span>#T2tDirect {
<span id="line24"></span> border:2px solid red;
<span id="line25"></span> background:yellow;
<span id="line26"></span> padding:3px;
<span id="line27"></span>}
<span id="line28"></span>-->
<span id="line29"></span></span><span></<span class="end-tag">style</span>></span><span>
<span id="line30"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line31"></span></span><span><!</span><span>--
<span id="line32"></span>function MyTip(arg)
<span id="line33"></span>{
<span id="line34"></span> switch(arg)
<span id="line35"></span> {
<span id="line36"></span> case "browser":
<span id="line37"></span> return Tip("Gecko-Browsers (Firefox, Mozilla, Netscape 6+)</span><span><b</span><span>r>Konqueror</span><span><b</span><span>r>IE 5+</span><span><b</span><span>r>Opera 7+</span><span><b</span><span>r>Safari</span><span><b</span><span>r>and all W3C-DOM-conformant browsers", TITLE, "Supported Browsers", ABOVE, true, SHADOW, true, JUMPHORZ, true);
<span id="line38"></span> case "docu":
<span id="line39"></span> 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);
<span id="line40"></span> case "download":
<span id="line41"></span> return Tip("Go to the paragraph where you can</span><span><b</span><span>r>download wz_tooltip.js as ZIP file", SHADOW, true, JUMPHORZ, true);
<span id="line42"></span> case "extensions":
<span id="line43"></span> return TagToTip('T2TExtensions', BALLOON, true, ABOVE, true, JUMPHORZ, true, OFFSETX, -17);
<span id="line44"></span> case "features":
<span id="line45"></span> return Tip("Short summary of features and capabilities", SHADOW, true, ABOVE, true, JUMPHORZ, true);
<span id="line46"></span> case "home":
<span id="line47"></span> return Tip("Go to the startpage of walterzorn.com", SHADOW, true);
<span id="line48"></span> }
<span id="line49"></span>}
<span id="line50"></span>
<span id="line51"></span>function FixCalcXY(el)
<span id="line52"></span>{
<span id="line53"></span> if(typeof(el.offsetParent) == "undefined")
<span id="line54"></span> return [70, 4000];
<span id="line55"></span> var a = new Array(0, -70);
<span id="line56"></span> while(el)
<span id="line57"></span> {
<span id="line58"></span> a[0] += el.offsetLeft || 0;
<span id="line59"></span> a[1] += el.offsetTop || 0;
<span id="line60"></span> el = el.offsetParent || null;
<span id="line61"></span> }
<span id="line62"></span> return a;
<span id="line63"></span>}
<span id="line64"></span>//-->
<span id="line65"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line66"></span></span><span></<span class="end-tag">head</span>></span><span>
<span id="line67"></span></span><span><<span class="start-tag">body</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line68"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/scripts/wz_tooltip.js">../scripts/wz_tooltip.js</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line69"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/scripts/tip_balloon.js">../scripts/tip_balloon.js</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line70"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/scripts/tip_drag.js">../scripts/tip_drag.js</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line71"></span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">top</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span>
<span id="line72"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/tooltip/tooltip.htm">http://www.walterzorn.de/tooltip/tooltip.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/germany.gif">../images/germany.gif</a>" <span class="attribute-name">align</span>="<a class="attribute-value">middle</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">German version</a>" <span class="attribute-name">width</span>="<a class="attribute-value">22</a>" <span class="attribute-name">height</span>="<a class="attribute-value">15</a>"></span><span></span><span></<span class="end-tag">a</span>></span><span> </span><span><<span class="start-tag">small</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/tooltip/tooltip.htm">http://www.walterzorn.de/tooltip/tooltip.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span>German version</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">small</span>></span><span>
<span id="line73"></span> </span><span><<span class="start-tag">center</span>></span><span>
<span id="line74"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line75"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line76"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('home')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/index.htm">../index.htm</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">logo</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/logo.gif">../images/logo.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>" <span class="attribute-name">width</span>="<a class="attribute-value">271</a>" <span class="attribute-name">height</span>="<a class="attribute-value">30</a>"></span><span></span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line77"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line78"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line79"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellspacing</span>="<a class="attribute-value">10</a>"></span><span>
<span id="line80"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line81"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML: Tooltip JavaScript</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('home')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/index.htm">../index.htm</a>"></span><span>Home</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line82"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/dragdrop/dragdrop_e.htm">../dragdrop/dragdrop_e.htm</a>"></span><span>DHTML-Drag<span class="entity"><span>&</span>amp;</span>Drop-Library</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line83"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm">../jsgraphics/jsgraphics_e.htm</a>"></span><span>VectorGraphics-Library</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line84"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Online Function Grapher written in JavaScript<br><span class="entity"><span>&</span>nbsp;</span><br><img src=../images/grapher.gif width=210 height=175>',SHADOW, true, BGCOLOR, '#ffffff')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/grapher/grapher_e.htm">../grapher/grapher_e.htm</a>"></span><span>Function-Grapher</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line85"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line86"></span></span><span class="comment"><!--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--></span><span>
<span id="line87"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line88"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line89"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line90"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line91"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">150</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line92"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line93"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line94"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line95"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line96"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line97"></span>
<span id="line98"></span>
<span id="line99"></span>
<span id="line100"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line101"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line102"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line103"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line104"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line105"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>"></span><span>
<span id="line106"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line107"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line108"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line109"></span> </span><span><<span class="start-tag">b</span>></span><span>
<span id="line110"></span> </span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>JavaScript, DHTML Tooltips</span><span></<span class="end-tag">big</span>></span><span>
<span id="line111"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line112"></span> JavaScript Cross Browser Library.
<span id="line113"></span> </span><span></<span class="end-tag">b</span>></span><span>
<span id="line114"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line115"></span> </span><span><<span class="start-tag">small</span>></span><span>Developed by Walter Zorn</span><span></<span class="end-tag">small</span>></span><span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line116"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line117"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">rowspan</span>="<a class="attribute-value">4</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">align</span>="<a class="attribute-value">center</a>" <span class="attribute-name">width</span>="<a class="attribute-value">150</a>"></span><span>
<span id="line118"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line119"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line120"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line121"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML: Tooltip with JavaScript</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line122"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line123"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line124"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line125"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#features">#features</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('features')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Features</span><span></<span class="end-tag">a</span>></span><span>
<span id="line126"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line127"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#browser">#browser</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('browser')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Cross Browser</span><span></<span class="end-tag">a</span>></span><span>
<span id="line128"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line129"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#docu">#docu</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('docu')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line130"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line131"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#extensions">#extensions</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('extensions')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Extensions</span><span></<span class="end-tag">a</span>></span><span>
<span id="line132"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line133"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#download">#download</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('download')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line134"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line135"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line136"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line137"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line138"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line139"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line140"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line141"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line142"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line143"></span> An easy to use cross-browser Tooltip JavaScript Library that creates tooltips, information popup boxes
<span id="line144"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('This is a tooltip')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>like this one</span><span></<span class="end-tag">a</span>></span><span>.
<span id="line145"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line146"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line147"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line148"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line149"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">features</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Features</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line150"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line151"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line152"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line153"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line154"></span> The
<span id="line155"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">TagToTip('T2TAdaptWidth')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>width</span><span></<span class="end-tag">a</span>></span><span>
<span id="line156"></span> of the tooltips is adapted automatically.
<span id="line157"></span> </span><span><<span class="start-tag">span</span> <span class="attribute-name">id</span>="<a class="attribute-value">T2TAdaptWidth</a>"></span><span>Of course you can also specify the width if you like to.</span><span></<span class="end-tag">span</span>></span><span>
<span id="line158"></span> The tooltips may contain plain text as well as HTML, such as
<span id="line159"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Tooltip containing an image, inserted into the tooltip text via <span class="entity"><span>&</span>amp;</span>lt;img<span class="entity"><span>&</span>amp;</span>gt; tag<br><img src=../images/tooltip/leop.jpg width=150 height=102>', WIDTH, 150, PADDING, 6, BGCOLOR, '#ffffff')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>images</span><span></<span class="end-tag">a</span>></span><span>,
<span id="line160"></span> line
<span id="line161"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Text with line<br>break, enforced by a <span class="entity"><span>&</span>amp;</span>lt;br<span class="entity"><span>&</span>amp;</span>gt; HTML tag')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>breaks</span><span></<span class="end-tag">a</span>></span><span>,
<span id="line162"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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>')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>tables</span><span></<span class="end-tag">a</span>></span><span>,
<span id="line163"></span> lists etc..
<span id="line164"></span> If you like, you can
<span id="line165"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>customize</span><span></<span class="end-tag">a</span>></span><span>
<span id="line166"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/kreuzot_ss.jpg">../images/kreuzot_ss.jpg</a>" <span class="attribute-name">align</span>="<a class="attribute-value">left</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">Image with a JavaScript tooltip (That's me on a quick 200km trip with my homebuilt carbon lowracer)</a>" <span class="attribute-name">title</span>="<a class="attribute-value">Image with a JavaScript tooltip (That's me on a quick 200km trip with my homebuilt carbon lowracer)</a>" <span class="attribute-name">width</span>="<a class="attribute-value">200</a>" <span class="attribute-name">height</span>="<a class="attribute-value">105</a>" <span class="attribute-name">vspace</span>="<a class="attribute-value">8</a>" <span class="attribute-name">hspace</span>="<a class="attribute-value">8</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>
<span id="line167"></span> these crossbrowser JavaScript Tooltips and their
<span id="line168"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>behavior</span><span></<span class="end-tag">a</span>></span><span>
<span id="line169"></span> in multiple ways.
<span id="line170"></span> You can change the default configuration values inside the library itself (section GLOBAL TOOLTIP CONFIGURATION),
<span id="line171"></span> or configure each tooltip individually by passing
<span id="line172"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#docu">#docu</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>commands</span><span></<span class="end-tag">a</span>></span><span>
<span id="line173"></span> to the onmouseover eventhandlers.
<span id="line174"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line175"></span> There are also
<span id="line176"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#extensions">#extensions</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">TagToTip('T2TBalloon', BALLOON, true, ABOVE, true, WIDTH, 260, PADDING, 8, TEXTALIGN, 'justify', OFFSETX, -17)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Extensions (plugins)</span><span></<span class="end-tag">a</span>></span><span>
<span id="line177"></span> available (or write your own!) which provide additional options to customize the tooltips.
<span id="line178"></span> </span><span><<span class="start-tag">span</span> <span class="attribute-name">id</span>="<a class="attribute-value">T2TBalloon</a>"></span><span>For example, to create a </span><span><<span class="start-tag">b</span>></span><span>balloon tooltip</span><span></<span class="end-tag">b</span>></span><span> like this one, just include the JavaScript plugin <span class="entity"><span>&</span>quot;</span>tip_balloon.js<span class="entity"><span>&</span>quot;</span> into your page and apply the BALLOON command to the tooltip.</span><span></<span class="end-tag">span</span>></span><span>
<span id="line179"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line180"></span> This Tooltip DHTML Library is even capable of dynamically converting arbitrary HTML elements to tooltips,
<span id="line181"></span> which means you can put really important stuff into tooltips, since HTML content is relevant to web search engines.
<span id="line182"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#docu">#docu</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>.
<span id="line183"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line184"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line185"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line186"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line187"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">browser</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Cross Browser</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line188"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line189"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line190"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line191"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line192"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line193"></span> This Tooltip JavaScript works in allmost all browsers, except of ancient browsers which nobody is using anymore (Netscape 4, Opera 5/6).
<span id="line194"></span> Supported browsers:
<span id="line195"></span> Gecko<span class="entity"><span>&</span>nbsp;</span>Browsers (Firefox, Mozilla, Netscape<span class="entity"><span>&</span>nbsp;</span>6+, Galeon and others),
<span id="line196"></span> IE<span class="entity"><span>&</span>nbsp;</span>5+, Opera<span class="entity"><span>&</span>nbsp;</span>7+, Konqueror, Safari.
<span id="line197"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line198"></span> In Opera, this Tooltip Library suppresses even the native, operating-system-based tooltips that would normally pop up over links, and
<span id="line199"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>cover any page content beneath them</span><span></<span class="end-tag">a</span>></span><span>.
<span id="line200"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line201"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line202"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line203"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line204"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line205"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">docu</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>How To Use The Script</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line206"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line207"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line208"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line209"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line210"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line211"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>1.</span><span></<span class="end-tag">big</span>></span><span> Download the library</span><span></<span class="end-tag">b</span>></span><span>
<span id="line212"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line213"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('download')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#download">#download</a>"></span><span>Download wz_tooltip.js</span><span></<span class="end-tag">a</span>></span><span> and unzipp it.
<span id="line214"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line215"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">rowspan</span>="<a class="attribute-value">3</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">align</span>="<a class="attribute-value">center</a>" <span class="attribute-name">width</span>="<a class="attribute-value">150</a>"></span><span>
<span id="line216"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line217"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line218"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML: Tooltips via JavaScript</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line219"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line220"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line221"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line222"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#top">#top</a>"></span><span>Top of page</span><span></<span class="end-tag">a</span>></span><span>
<span id="line223"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line224"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#features">#features</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('features')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Features</span><span></<span class="end-tag">a</span>></span><span>
<span id="line225"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line226"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#browser">#browser</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('browser')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Cross Browser</span><span></<span class="end-tag">a</span>></span><span>
<span id="line227"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line228"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#docu">#docu</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('docu')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line229"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line230"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#extensions">#extensions</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('extensions')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Extensions</span><span></<span class="end-tag">a</span>></span><span>
<span id="line231"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line232"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#download">#download</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('download')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line233"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line234"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line235"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line236"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line237"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line238"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line239"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line240"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line241"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line242"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>2.</span><span></<span class="end-tag">big</span>></span><span> Link wz_tooltip.js into the html file</span><span></<span class="end-tag">b</span>></span><span>
<span id="line243"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line244"></span> Copy the following line to </span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#ff0000;</a>"></span><span>inside the BODY section</span><span></<span class="end-tag">b</span>></span><span>,
<span id="line245"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">TagToTip('T2TBegBody', WIDTH, 300)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>preferably</span><span></<span class="end-tag">a</span>></span><span>
<span id="line246"></span> immediately after the opening <span class="entity"><span>&</span>lt;</span>body<span class="entity"><span>&</span>gt;</span> tag:
<span id="line247"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line248"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line249"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line250"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line251"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line252"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line253"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line254"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span> src=<span class="entity"><span>&</span>quot;</span>wz_tooltip.js<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line255"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line256"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line257"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line258"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line259"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line260"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line261"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line262"></span> If necessary, adapt the path 'src=<span class="entity"><span>&</span>quot;</span>wz_tooltip.js<span class="entity"><span>&</span>quot;</span>' to the JavaScript file.
<span id="line263"></span> </span><span><<span class="start-tag">strong</span>></span><span>Note: Use the downloaded file only</span><span></<span class="end-tag">strong</span>></span><span>, do not hardlink wz_tooltip.js from my site.
<span id="line264"></span> </span><span><<span class="start-tag">span</span> <span class="attribute-name">id</span>="<a class="attribute-value">T2TBegBody</a>"></span><span>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><span></<span class="end-tag">span</span>></span><span>
<span id="line265"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>3.</span><span></<span class="end-tag">big</span>></span><span> Specify tooltip text inside onmouseover eventhandlers</span><span></<span class="end-tag">b</span>></span><span>
<span id="line266"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line267"></span> Each of the html tags to display a tooltip requires an onmouseover and an onmouseout attribute like so:
<span id="line268"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line269"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line270"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line271"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line272"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line273"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line274"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line275"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line276"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>index.htm<span class="entity"><span>&</span>quot;</span> onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some<span class="entity"><span>&</span>nbsp;</span>text')<span class="entity"><span>&</span>quot;</span> onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>Homepage</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line277"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span><span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line278"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line279"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line280"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line281"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line282"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line283"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line284"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line285"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line286"></span> That's all.
<span id="line287"></span> No title attributes, no container DIV.
<span id="line288"></span> As you can see, the text to be displayed must be enclosed with single quotes, and be passed to a function </span><span><<span class="start-tag">tt</span>></span><span>Tip()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line289"></span> </span><span><<span class="start-tag">b</span>></span><span>Attention:</span><span></<span class="end-tag">b</span>></span><span> Single quotes (apostrophes) inside the tooltip text each must be masked with a backslash.
<span id="line290"></span> Example:</span><span><<span class="start-tag">br</span>></span><span>
<span id="line291"></span> </span><span><<span class="start-tag">tt</span>></span><span>Tip('This text won</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>\'</span><span></<span class="end-tag">b</span>></span><span>t trigger a JavaScript error.');</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line292"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line293"></span> The call of </span><span><<span class="start-tag">tt</span>></span><span>UnTip()</span><span></<span class="end-tag">tt</span>></span><span> in the onmouseout eventhandler is to hide the tooltip again.
<span id="line294"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line295"></span> Of course you may also use different eventhandlers for </span><span><<span class="start-tag">tt</span>></span><span>Tip()</span><span></<span class="end-tag">tt</span>></span><span> and/or </span><span><<span class="start-tag">tt</span>></span><span>UnTip()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line296"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line297"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line298"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line299"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line300"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line301"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>4.</span><span></<span class="end-tag">big</span>></span><span> Doesn't Work?</span><span></<span class="end-tag">b</span>></span><span>
<span id="line302"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line303"></span> </span><span><<span class="start-tag">b</span>></span><span>a)</span><span></<span class="end-tag">b</span>></span><span> Check the (dynamically generated?) HTML and the CSS of the page, preferably with the W3C Online Validator at </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://validator.w3.org/">http://validator.w3.org/</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_blank</a>"></span><span>http://validator.w3.org/</span><span></<span class="end-tag">a</span>></span><span>.
<span id="line304"></span> DOM errors will probably break the script.
<span id="line305"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line306"></span> </span><span><<span class="start-tag">b</span>></span><span>b)</span><span></<span class="end-tag">b</span>></span><span>
<span id="line307"></span> Verify that you've exactly followed </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#docu">#docu</a>"></span><span>steps<span class="entity"><span>&</span>nbsp;</span>1<span class="entity"><span>&</span>nbsp;</span>to<span class="entity"><span>&</span>nbsp;</span>3</span><span></<span class="end-tag">a</span>></span><span> on how to include the script, and everything mentioned under <span class="entity"><span>&</span>quot;</span>Extended<span class="entity"><span>&</span>nbsp;</span>Configuration<span class="entity"><span>&</span>quot;</span> further down this page.
<span id="line308"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line309"></span> </span><span><<span class="start-tag">b</span>></span><span>c)</span><span></<span class="end-tag">b</span>></span><span>
<span id="line310"></span> Watch the JS Error Console of your browser.
<span id="line311"></span> 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.
<span id="line312"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line313"></span> </span><span><<span class="start-tag">b</span>></span><span>d)</span><span></<span class="end-tag">b</span>></span><span>
<span id="line314"></span> </span><span><<span class="start-tag">b</span>></span><span>Please don't claim you've found a bug</span><span></<span class="end-tag">b</span>></span><span>
<span id="line315"></span> - unless you've checked everything very carefully, and you're absolutely sure.
<span id="line316"></span> Please understand that I like developing code much more than debugging other peoples' web pages.
<span id="line317"></span> Feedback is welcome, of course!
<span id="line318"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line319"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line320"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line321"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line322"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line323"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Extended Configuration</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line324"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line325"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line326"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line327"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line328"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line329"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>5.</span><span></<span class="end-tag">big</span>></span><span> Alternative: Convert HTML element to tooltip</span><span></<span class="end-tag">b</span>></span><span>
<span id="line330"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line331"></span> Instead of defining the tooltip text directly, you can specify an arbitrary HTML element to be converted to a tooltip.
<span id="line332"></span> This is advantageous in some aspects:
<span id="line333"></span> </span><span><<span class="start-tag">ul</span>></span><span>
<span id="line334"></span> </span><span><<span class="start-tag">li</span>></span><span>You can have really important stuff in tooltips, since HTML content (unlike JavaScript content) of a page is relevant to web search engines.</span><span></<span class="end-tag">li</span>></span><span>
<span id="line335"></span> </span><span><<span class="start-tag">li</span>></span><span>If placed conveniently in the page, the content is also available for users who have disabled JavaScript.</span><span></<span class="end-tag">li</span>></span><span>
<span id="line336"></span> </span><span><<span class="start-tag">li</span>></span><span>Optionally, the HTML element can even stay visible; for example, if you want to display its content in a tooltip at a different location.</span><span></<span class="end-tag">li</span>></span><span>
<span id="line337"></span> </span><span><<span class="start-tag">li</span>></span><span>It may be easier to define complex inner tooltip HTML directly in the HTML element to be converted, rather than in a JavaScript string.</span><span></<span class="end-tag">li</span>></span><span>
<span id="line338"></span> </span><span></<span class="end-tag">ul</span>></span><span>
<span id="line339"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line340"></span> To define a tooltip to be created from an HTML element, just pass the ID of the desired HTML tag to the function </span><span><<span class="start-tag">tt</span>></span><span>TagToTip()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line341"></span> Example:
<span id="line342"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line343"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line344"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line345"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line346"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line347"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line348"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line349"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line350"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>index.htm<span class="entity"><span>&</span>quot;</span> onmouseover=<span class="entity"><span>&</span>quot;</span>TagToTip('Span2')<span class="entity"><span>&</span>quot;</span> onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>Home page</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line351"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span><span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line352"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line353"></span>...
<span id="line354"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line355"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span><span class="entity"><span>&</span>lt;</span>span id=<span class="entity"><span>&</span>quot;</span>Span2<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>This is some comment<span class="entity"><span>&</span>lt;</span>br<span class="entity"><span>&</span>gt;</span>about my home page<span class="entity"><span>&</span>lt;</span>/span<span class="entity"><span>&</span>gt;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line356"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line357"></span>...
<span id="line358"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line359"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line360"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line361"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line362"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line363"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line364"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line365"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line366"></span> In this example, the tooltip over the link will display the content grabbed from the <span class="entity"><span>&</span>lt;</span>span<span class="entity"><span>&</span>gt;</span> element.
<span id="line367"></span> 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.
<span id="line368"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line369"></span> While the page is loading, the Tooltip Library hides automatically HTML elements to be converted to tooltips (e.g. the <span class="entity"><span>&</span>lt;</span>span<span class="entity"><span>&</span>gt;</span> element in the example above).
<span id="line370"></span> To disable this auto-hide feature, set the variable </span><span><<span class="start-tag">tt</span>></span><span>TagsToTip</span><span></<span class="end-tag">tt</span>></span><span> in the global tooltip configuration in wz_tooltip.js to the value false
<span id="line371"></span> (preset default: true).
<span id="line372"></span> If desired, you must hide those HTML elements yourself, by setting their CSS 'display' property to 'none'.
<span id="line373"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line374"></span> As a side note: Especially in IE, page loading performance might benefit from disabling the auto-hide feature.
<span id="line375"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line376"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">rowspan</span>="<a class="attribute-value">2</a>" <span class="attribute-name">width</span>="<a class="attribute-value">150</a>" <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line377"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line378"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line379"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML: Tooltips per JavaScript</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line380"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line381"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line382"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line383"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#top">#top</a>"></span><span>Top of page</span><span></<span class="end-tag">a</span>></span><span>
<span id="line384"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line385"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#features">#features</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('features')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Features</span><span></<span class="end-tag">a</span>></span><span>
<span id="line386"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line387"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#browser">#browser</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('browser')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Cross Browser</span><span></<span class="end-tag">a</span>></span><span>
<span id="line388"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line389"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#docu">#docu</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('docu')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line390"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line391"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#extensions">#extensions</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('extensions')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Extensions</span><span></<span class="end-tag">a</span>></span><span>
<span id="line392"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line393"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#download">#download</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('download')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line394"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line395"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line396"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line397"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line398"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line399"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line400"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line401"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line402"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line403"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>6.</span><span></<span class="end-tag">big</span>></span><span> HTML inside tooltips</span><span></<span class="end-tag">b</span>></span><span>
<span id="line404"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line405"></span> For </span><span><<span class="start-tag">i</span>></span><span>images</span><span></<span class="end-tag">i</span>></span><span> inside the tooltip, the width and height attributes in the <span class="entity"><span>&</span>lt;</span>img<span class="entity"><span>&</span>gt;</span> tags must be specified.
<span id="line406"></span> This enables the script to determine the tooltip size correctly.
<span id="line407"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line408"></span> </span><span><<span class="start-tag">i</span>></span><span>Doublequotes</span><span></<span class="end-tag">i</span>></span><span> within the tooltip text must be written as HTML character entity (<span class="entity"><span>&</span>amp;</span>quot;),
<span id="line409"></span> since doublequotes serve already as delimiters for the onmouseover eventhandler, and cannot be nested.
<span id="line410"></span> </span><span><<span class="start-tag">i</span>></span><span>Apostrophes (singlequotes)</span><span></<span class="end-tag">i</span>></span><span> must be masked with a preceding backslash, since apostophes serve already as delimiters for the tooltip text.
<span id="line411"></span> As </span><span><<span class="start-tag">i</span>></span><span>delimiters for HTML tag attributes</span><span></<span class="end-tag">i</span>></span><span> inside the tooltip text, you can use either <span class="entity"><span>&</span>amp;</span>quot; or \'<span class="entity"><span>&</span>nbsp;</span>.
<span id="line412"></span> Example:
<span id="line413"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line414"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line415"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line416"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line417"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line418"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line419"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line420"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line421"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>"></span><span>
<span id="line422"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line423"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line424"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line425"></span></span><span><<span class="start-tag">b</span>></span><span>Correct:</span><span></<span class="end-tag">b</span>></span><span>
<span id="line426"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line427"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line428"></span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>index.htm<span class="entity"><span>&</span>quot;</span>
<span id="line429"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line430"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line431"></span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Text with <span class="entity"><span>&</span>lt;</span>img src=</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>\'</span><span></<span class="end-tag">b</span>></span><span>pics/image.jpg</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>\'</span><span></<span class="end-tag">b</span>></span><span> width=</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>\'</span><span></<span class="end-tag">b</span>></span><span>60</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>\'</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>gt;</span>image.')<span class="entity"><span>&</span>quot;</span>
<span id="line432"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line433"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line434"></span>onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>
<span id="line435"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line436"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line437"></span>Homepage <span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span>
<span id="line438"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line439"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line440"></span>or
<span id="line441"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line442"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line443"></span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>index.htm<span class="entity"><span>&</span>quot;</span>
<span id="line444"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line445"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line446"></span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Text with <span class="entity"><span>&</span>lt;</span>img src=</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span><span class="entity"><span>&</span>amp;</span>quot;</span><span></<span class="end-tag">b</span>></span><span>pics/image.jpg</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span><span class="entity"><span>&</span>amp;</span>quot;</span><span></<span class="end-tag">b</span>></span><span> width=</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span><span class="entity"><span>&</span>amp;</span>quot;</span><span></<span class="end-tag">b</span>></span><span>60</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span><span class="entity"><span>&</span>amp;</span>quot;</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>gt;</span>image.')<span class="entity"><span>&</span>quot;</span>
<span id="line447"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line448"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line449"></span>onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>
<span id="line450"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line451"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line452"></span>Homepage <span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span>
<span id="line453"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line454"></span>
<span id="line455"></span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line456"></span></span><span><<span class="start-tag">b</span>></span><span>Wrong:</span><span></<span class="end-tag">b</span>></span><span>
<span id="line457"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line458"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line459"></span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>index.htm<span class="entity"><span>&</span>quot;</span>
<span id="line460"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line461"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line462"></span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Text with <span class="entity"><span>&</span>lt;</span>img src=</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span><span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">b</span>></span><span>pics/image.jpg</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span><span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">b</span>></span><span> width=</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span><span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">b</span>></span><span>60</span><span><<span class="start-tag">b</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span><span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>gt;</span>image.')<span class="entity"><span>&</span>quot;</span>
<span id="line463"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line464"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line465"></span>onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>
<span id="line466"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line467"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line468"></span>Homepage <span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span>
<span id="line469"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line470"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line471"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line472"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line473"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line474"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line475"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line476"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line477"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line478"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">150</a>"></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line479"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>"></span><span>
<span id="line480"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line481"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line482"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line483"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>7.</span><span></<span class="end-tag">big</span>></span><span> Formatting tooltips with CSS classes</span><span></<span class="end-tag">b</span>></span><span>
<span id="line484"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line485"></span> Simply wrap the tooltip text in a DIV or SPAN element of the desired CSS class.
<span id="line486"></span> 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).
<span id="line487"></span> Example:
<span id="line488"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line489"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line490"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line491"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line492"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>... onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('<span class="entity"><span>&</span>lt;</span>div class=<span class="entity"><span>&</span>amp;</span>quot;TipCls1<span class="entity"><span>&</span>amp;</span>quot;<span class="entity"><span>&</span>gt;</span>Text of tooltip number one<span class="entity"><span>&</span>lt;</span>/div<span class="entity"><span>&</span>gt;</span>')<span class="entity"><span>&</span>quot;</span> ...</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line493"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line494"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>... onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('<span class="entity"><span>&</span>lt;</span>span class=\'TipCls2\'<span class="entity"><span>&</span>gt;</span>Text of tooltip number two<span class="entity"><span>&</span>lt;</span>/span<span class="entity"><span>&</span>gt;</span>')<span class="entity"><span>&</span>quot;</span> ...</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line495"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line496"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>... onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Tooltip number 3', TITLE, '<span class="entity"><span>&</span>lt;</span>div class=\'TitleCls\'<span class="entity"><span>&</span>gt;</span>Some Title<span class="entity"><span>&</span>lt;</span>/div<span class="entity"><span>&</span>gt;</span>')<span class="entity"><span>&</span>quot;</span> ...</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line497"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line498"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line499"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line500"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line501"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line502"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line503"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line504"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line505"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>8.</span><span></<span class="end-tag">big</span>></span><span> Tooltip content via variable or function call</span><span></<span class="end-tag">b</span>></span><span>
<span id="line506"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line507"></span> Instead of a string enclosed with single quotes, </span><span><<span class="start-tag">tt</span>></span><span>Tip()</span><span></<span class="end-tag">tt</span>></span><span> accepts as well a variable or a call to a function defined elsewhere, for instance in a <span class="entity"><span>&</span>lt;</span>script<span class="entity"><span>&</span>gt;</span> block or in a separate JS file.
<span id="line508"></span> The same is true for commands passed to </span><span><<span class="start-tag">tt</span>></span><span>Tip()</span><span></<span class="end-tag">tt</span>></span><span> or </span><span><<span class="start-tag">tt</span>></span><span>TagToTip()</span><span></<span class="end-tag">tt</span>></span><span> (listing and description of commands see below).
<span id="line509"></span> Thus, each time a tooltip is about to be displayed, its content and formatting could be established dynamically.
<span id="line510"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line511"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line512"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line513"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line514"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line515"></span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>
<span id="line516"></span><span class="entity"><span>&</span>lt;</span>html<span class="entity"><span>&</span>gt;</span>
<span id="line517"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line518"></span><span class="entity"><span>&</span>lt;</span>head<span class="entity"><span>&</span>gt;</span>
<span id="line519"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line520"></span>...
<span id="line521"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line522"></span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>
<span id="line523"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line524"></span></span><span><<span class="start-tag">font</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>var txt1 = <span class="entity"><span>&</span>quot;</span>This is the text of the first tooltip<span class="entity"><span>&</span>quot;</span>;
<span id="line525"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line526"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line527"></span>function TooltipTxt(n)
<span id="line528"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line529"></span><span class="entity"><span>&</span>#123;</span>
<span id="line530"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line531"></span><span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>nbsp;</span>return <span class="entity"><span>&</span>quot;</span>This is the text of the <span class="entity"><span>&</span>quot;</span> + n + <span class="entity"><span>&</span>quot;</span> tooltip<span class="entity"><span>&</span>quot;</span>;
<span id="line532"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line533"></span><span class="entity"><span>&</span>#125;</span></span><span></<span class="end-tag">font</span>></span><span>
<span id="line534"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line535"></span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span>
<span id="line536"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line537"></span><span class="entity"><span>&</span>lt;</span>/head<span class="entity"><span>&</span>gt;</span>
<span id="line538"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line539"></span><span class="entity"><span>&</span>lt;</span>body<span class="entity"><span>&</span>gt;</span>
<span id="line540"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line541"></span><span class="entity"><span>&</span>lt;</span>script type=<span class="entity"><span>&</span>quot;</span>text/javascript<span class="entity"><span>&</span>quot;</span> src=<span class="entity"><span>&</span>quot;</span>wz_tooltip.js<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span><span class="entity"><span>&</span>lt;</span>/script<span class="entity"><span>&</span>gt;</span>
<span id="line542"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line543"></span>...
<span id="line544"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line545"></span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>a.htm<span class="entity"><span>&</span>quot;</span> </span><span><<span class="start-tag">font</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip(txt1)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span> onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>Link 1<span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span>
<span id="line546"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line547"></span>...
<span id="line548"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line549"></span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>b.htm<span class="entity"><span>&</span>quot;</span> </span><span><<span class="start-tag">font</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip(TooltipTxt('second'))<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span> onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>Link 2<span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span>
<span id="line550"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line551"></span>...
<span id="line552"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line553"></span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>c.htm<span class="entity"><span>&</span>quot;</span> </span><span><<span class="start-tag">font</span> <span class="attribute-name">style</span>="<a class="attribute-value">color:#dd0000;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip(TooltipTxt('third'))<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span> onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>Link 3<span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span>
<span id="line554"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line555"></span>...
<span id="line556"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line557"></span><span class="entity"><span>&</span>lt;</span>/body<span class="entity"><span>&</span>gt;</span>
<span id="line558"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line559"></span><span class="entity"><span>&</span>lt;</span>/html<span class="entity"><span>&</span>gt;</span>
<span id="line560"></span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line561"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line562"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line563"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line564"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line565"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">rowspan</span>="<a class="attribute-value">2</a>" <span class="attribute-name">width</span>="<a class="attribute-value">150</a>" <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line566"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line567"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line568"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML: Tooltips per JavaScript</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line569"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line570"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line571"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line572"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#top">#top</a>"></span><span>Top of page</span><span></<span class="end-tag">a</span>></span><span>
<span id="line573"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line574"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#features">#features</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('features')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Features</span><span></<span class="end-tag">a</span>></span><span>
<span id="line575"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line576"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#browser">#browser</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('browser')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Cross Browser</span><span></<span class="end-tag">a</span>></span><span>
<span id="line577"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line578"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#docu">#docu</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('docu')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line579"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line580"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#extensions">#extensions</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('extensions')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Extensions</span><span></<span class="end-tag">a</span>></span><span>
<span id="line581"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line582"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#download">#download</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('download')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line583"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line584"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line585"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line586"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line587"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line588"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line589"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line590"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line591"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line592"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>9.</span><span></<span class="end-tag">big</span>></span><span> Commands to customize tooltips individually</span><span></<span class="end-tag">b</span>></span><span>
<span id="line593"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line594"></span> The global default configuration, taking effect on all tooltips, can be changed in the JavaScript file itself, in the section <span class="entity"><span>&</span>quot;</span>GLOBAL TOOLTIP CONFIGURATION<span class="entity"><span>&</span>quot;</span>.
<span id="line595"></span> To configure tooltips individually, you can use the commands listed below.
<span id="line596"></span> These individual commands override the global configuration in wz_tooltip.js.
<span id="line597"></span> They can be passed to the Tip() or TagToTip() function calls in the onmouseover eventhandlers.
<span id="line598"></span> Each command must be accompanied by the desired value, separated by a comma:
<span id="line599"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line600"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line601"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line602"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line603"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', ABOVE, true)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line604"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line605"></span>or
<span id="line606"></span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line607"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>TagToTip('SomeID', TITLEFONTCOLOR, '#CCFFCC')<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line608"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line609"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line610"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line611"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line612"></span> Multiple commands form a comma-separated list of command-value pairs.
<span id="line613"></span> Order of commands is arbitrary. Example:
<span id="line614"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line615"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line616"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line617"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line618"></span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some tooltip text', SHADOW, true, TITLE, 'Some Title', PADDING, 9)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line619"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line620"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line621"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line622"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line623"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line624"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line625"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line626"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line627"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line628"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line629"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line630"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line631"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">50</a>"></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line632"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>"></span><span>
<span id="line633"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line634"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line635"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line636"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">6</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>"></span><span>
<span id="line637"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line638"></span> </span><span><<span class="start-tag">th</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>"></span><span>Command</span><span></<span class="end-tag">th</span>></span><span>
<span id="line639"></span> </span><span><<span class="start-tag">th</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>"></span><span>Description</span><span></<span class="end-tag">th</span>></span><span>
<span id="line640"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line641"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line642"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line643"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Tooltip positioned above mouse pointer', ABOVE, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>ABOVE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line644"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line645"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line646"></span> Positions the tooltip above the mousepointer.
<span id="line647"></span> Value: true or false.
<span id="line648"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line649"></span> Combine with
<span id="line650"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('These commands have been applied:<br>ABOVE, true, OFFSETY, 50', ABOVE,true,OFFSETY,50);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>OFFSETY</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line651"></span> to adjust the vertical distance from the mousepointer,
<span id="line652"></span> or with
<span id="line653"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('These commands have been applied:<br>ABOVE, true, CENTERMOUSE, true', ABOVE, true, CENTERMOUSE, true, OFFSETX, 0);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>CENTERMOUSE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line654"></span> to center the tooltip horizontally above the mousepointer.
<span id="line655"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line656"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line657"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line658"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line659"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Changed background color', BGCOLOR,'#f3e0f3');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>BGCOLOR</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line660"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line661"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line662"></span> Background color of the tooltip.
<span id="line663"></span> Value: HTML color, in single quotes, e.g. '#D3E3F6' or 'DarkCyan',
<span id="line664"></span> or empty string </span><span><<span class="start-tag">tt</span>></span><span>''</span><span></<span class="end-tag">tt</span>></span><span> for
<span id="line665"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('This tooltip has neither a background<br>nor a border', BORDERWIDTH, 0, BGCOLOR, '', FONTWEIGHT, 'bold', FONTCOLOR, '#00AA00')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>no background</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line666"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line667"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line668"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', BGCOLOR, '#D3E3F6')<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line669"></span> </span><span><<span class="start-tag">br</span>></span><span>or</span><span><<span class="start-tag">br</span>></span><span>
<span id="line670"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', BGCOLOR, '')<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line671"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line672"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line673"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line674"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line675"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Tooltip with background image', BGIMG, '../images/tooltip/tt_bg.jpg', PADDING, 10, WIDTH, 180);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>BGIMG</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line676"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line677"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line678"></span> Background image.
<span id="line679"></span> Value: Path to image, in single quotes.
<span id="line680"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line681"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line682"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', BGIMG, '../images/tipbackground.gif')<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line683"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line684"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line685"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line686"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line687"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Altered border color', BORDERCOLOR, '#dd00aa');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>BORDERCOLOR</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line688"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line689"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line690"></span> Border color.
<span id="line691"></span> Value: HTML color, in single quotes, e.g. '#dd00aa'.
<span id="line692"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line693"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line694"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line695"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line696"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Dashed border style', BORDERSTYLE, 'dashed', PADDING, 8);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>BORDERSTYLE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line697"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line698"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line699"></span> Border style.
<span id="line700"></span> Value: CSS border style, in single quotes.
<span id="line701"></span> Recommend are 'solid' (default), 'dashed' or 'dotted', others may not work in all browsers.
<span id="line702"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line703"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line704"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line705"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line706"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Width of tooltip border', BORDERWIDTH, 5);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>BORDERWIDTH</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line707"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line708"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line709"></span> Width of tooltip border.
<span id="line710"></span> Value: Integer<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>ge;</span><span class="entity"><span>&</span>nbsp;</span>0. Default is 1. Use 0 for no border.
<span id="line711"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line712"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line713"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', BORDERWIDTH, 2)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line714"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line715"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line716"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line717"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line718"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Centered beneath the mouse', CENTERMOUSE, true, OFFSETX, 0, OFFSETY, 22);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>CENTERMOUSE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line719"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line720"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line721"></span> Centers the tooltip horizontally beneath (or above) the mousepointer.
<span id="line722"></span> Value: true or false.
<span id="line723"></span> Consider that the tooltip is offset from the center by the value globally set in wz_tooltip.js (</span><span><<span class="start-tag">tt</span>></span><span>config.<span class="entity"><span>&</span>nbsp;</span>OffsetX</span><span></<span class="end-tag">tt</span>></span><span>), or as specified by the OFFSETX command.
<span id="line724"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line725"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line726"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', CENTERMOUSE, true, OFFSETX, 0)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line727"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line728"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line729"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line730"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line731"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('This tooltip is <span class="entity"><span>&</span>quot;</span>sticky<span class="entity"><span>&</span>quot;</span>, 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);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>CLICKCLOSE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line732"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line733"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line734"></span> Closes the tooltip once the user clicks somewhere inside the tooltip or into the document.
<span id="line735"></span> Value: true, false.
<span id="line736"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line737"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line738"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line739"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line740"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Make this tooltip sticky by clicking onto the link', CLICKSTICKY, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>CLICKSTICKY</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line741"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line742"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line743"></span> Enables the user to fixate the tooltip, by just clicking onto the HTML element (e.g. link) that triggered the tooltip.
<span id="line744"></span> This might help the user to read the tooltip more conveniently.
<span id="line745"></span> Value: true, false.
<span id="line746"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line747"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Click the link to make this tooltip sticky. To close the tooltip when it\'s fixated, click somewhere.', TITLE, 'CLICKSTICKY <span class="entity"><span>&</span>amp;</span> CLICKCLOSE <span class="entity"><span>&</span>amp;</span> CLOSEBTN', CLICKSTICKY, true, CLICKCLOSE, true, CLOSEBTN, true, WIDTH, -1)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Text', CLICKSTICKY, true, CLICKCLOSE, true, CLOSEBTN, true)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line748"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line749"></span> In this example, additionally specifying CLICKCLOSE enables the user to close the tooltip with just another click somewhere into the document.
<span id="line750"></span> Redundantly provided is a closebutton.
<span id="line751"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line752"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line753"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line754"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line755"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Closebutton in the titlebar', CLOSEBTN, true, STICKY, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>CLOSEBTN</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line756"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line757"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line758"></span> Displays a closebutton in the titlebar.
<span id="line759"></span> Value: true, false.
<span id="line760"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line761"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line762"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line763"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line764"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Altered closebutton colors', CLOSEBTN, true, STICKY, true, CLOSEBTNCOLORS, ['#7799cc', '#ffaaaa', '#ffffff', '#ff0000']);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>CLOSEBTNCOLORS</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line765"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line766"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line767"></span> Colors used for the closebutton.
<span id="line768"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line769"></span> Value must be a comma-separated array of 4 color values.
<span id="line770"></span> Each color in single quotes.
<span id="line771"></span> The entire array must be enclosed with a pair of square brackets, see example below, since it's actually a single parameter.
<span id="line772"></span> The 4 colors have the following meanings:
<span id="line773"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line774"></span> 1. Background color
<span id="line775"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line776"></span> 2. Text color
<span id="line777"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line778"></span> 3. Highlighted background, while the button is being hovered
<span id="line779"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line780"></span> 4. Hilighted text color, while the button is being hovered
<span id="line781"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line782"></span> For each of these colors, you can also specify an empty string </span><span><<span class="start-tag">tt</span>></span><span>''</span><span></<span class="end-tag">tt</span>></span><span>,
<span id="line783"></span> in which case the title background, or title text color, respectively, is used for that button state.
<span id="line784"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line785"></span> Example:</span><span><<span class="start-tag">br</span>></span><span>
<span id="line786"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>Tip('Text', CLOSEBTN, true, CLOSEBTNCOLORS, ['', '#66ff66', 'white', '#00cc00'], STICKY, true)</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line787"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line788"></span> In this example, the first color value (background color) is an empty string.
<span id="line789"></span> Therefore the closebutton inherits the titlebar background.
<span id="line790"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line791"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line792"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line793"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line794"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Altered closebutton text', CLOSEBTN, true, STICKY, true, CLOSEBTNTEXT, 'Click Me');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>CLOSEBTNTEXT</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line795"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line796"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line797"></span> Text in the closebutton.
<span id="line798"></span> Value must be enclosed with single quotes.
<span id="line799"></span> Example:
<span id="line800"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line801"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>Tip('Tooltip text', CLOSEBTN, true, CLOSEBTNTEXT, 'Click Me', STICKY, true)</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line802"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line803"></span> Globally preset in wz_tooltip.js is '<span class="entity"><span>&</span>amp;</span>nbsp;X<span class="entity"><span>&</span>amp;</span>nbsp;' - the whitespace entities '<span class="entity"><span>&</span>amp;</span>nbsp;' add some horizontal padding to the button.
<span id="line804"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line805"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line806"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line807"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line808"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">TagToTip('T2tDirect', COPYCONTENT, false, PADDING, 0, BORDERWIDTH, 0, WIDTH, 280);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>COPYCONTENT</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line809"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">T2tDirect</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:relative;top:50px;</a>"></span><span>
<span id="line810"></span> Actually, this DIV was embedded right into the HTML of the document, but it has been temporarily converted to a tooltip.
<span id="line811"></span> </span><span></<span class="end-tag">div</span>></span><span>
<span id="line812"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line813"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line814"></span> COPYCONTENT has only effect on tooltips created with </span><span><<span class="start-tag">tt</span>></span><span>TagToTip()</span><span></<span class="end-tag">tt</span>></span><span>, that is, for HTML elements converted to tooltips.
<span id="line815"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line816"></span> Value: true, false.
<span id="line817"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line818"></span> 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.
<span id="line819"></span> 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:
<span id="line820"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line821"></span> 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.
<span id="line822"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line823"></span> 2.) The tooltip inherits the style properties of the HTML element.
<span id="line824"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line825"></span> Example how to convert an HTML element entirely to a tooltip, by applying COPYCONTENT with the value </span><span><<span class="start-tag">tt</span>></span><span>false</span><span></<span class="end-tag">tt</span>></span><span>:
<span id="line826"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line827"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tt</a>"></span><span>TagToTip('SomeID', COPYCONTENT, false, BORDERWIDTH, 0, PADDING, 0)</span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line828"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line829"></span> Moreover, this example turns off the native tooltip border (BORDERWIDTH,<span class="entity"><span>&</span>nbsp;</span>0),
<span id="line830"></span> and sets the native tooltip padding to zero, so only the padding and border defined for the HTML element itself are displayed.
<span id="line831"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line832"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line833"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line834"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line835"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Delay of 1000 ms until the tooltip shows up.<br><span class="entity"><span>&</span>nbsp;</span><br>A small delay of 400 ms is preset in wz_tooltip.js (in the section <span class="entity"><span>&</span>quot;</span>GLOBAL TOOLTIP CONFIGURATION<span class="entity"><span>&</span>quot;</span>) and can be changed there. Note, however, that values much shorter or longer than 500 ms might be perceived as irritating.', DELAY, 1000, WIDTH, 360);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>DELAY</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line836"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line837"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line838"></span> Tooltip shows up after the specified timeout, in milliseconds.
<span id="line839"></span> A behavior similar to OS based tooltips.
<span id="line840"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line841"></span> Value:
<span id="line842"></span> Integer<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>ge;</span><span class="entity"><span>&</span>nbsp;</span>0. Use 0 for no delay.
<span id="line843"></span> In wz_tooltip.js preset and recommended is 400.
<span id="line844"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line845"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line846"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', DELAY, 1000)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line847"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line848"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line849"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line850"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line851"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Lifetime of this tip has been limitd to 2500 milliseconds', DURATION, 2500);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>DURATION</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line852"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line853"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line854"></span> Time span, in milliseconds, until the tooltip is hidden,
<span id="line855"></span> even if the </span><span><<span class="start-tag">tt</span>></span><span>STICKY</span><span></<span class="end-tag">tt</span>></span><span> command has been applied,
<span id="line856"></span> or even if the mouse is still on the HTML element that has triggered the tooltip.
<span id="line857"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line858"></span> Value: Integer.
<span id="line859"></span> Use 0 for no limitation (this is the default).
<span id="line860"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line861"></span> A negative value has a different meaning:
<span id="line862"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>It specifies a duration</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>,
<span id="line863"></span> in milliseconds, </span><span><<span class="start-tag">i</span>></span><span>starting with the onmouseout</span><span></<span class="end-tag">i</span>></span><span> until the tooltip is hidden.
<span id="line864"></span> In other words, a negative value makes tooltip hide with some delay, rather than immediately.
<span id="line865"></span> Especially useful for tooltips that don't follow the movements of the mouse (FOLLOWMOUSE,<span class="entity"><span>&</span>nbsp;</span>false).
<span id="line866"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line867"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line868"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line869"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line870"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value"> 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);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>EXCLUSIVE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line871"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line872"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line873"></span> No other tooltip can be displayed until this one has been closed actively by the user.
<span id="line874"></span> Value: true, false.
<span id="line875"></span> Makes only sense for sticky tooltips (STICKY command).
<span id="line876"></span> Of course, you must also provide the CLOSEBTN or/and CLICKCLOSE command to give the user a means to close the tooltip.
<span id="line877"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line878"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line879"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line880"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line881"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value"> Tip('Fade-in animation', FADEIN, 1000, PADDING, 10);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FADEIN</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line882"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line883"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line884"></span> Fade-in animation.
<span id="line885"></span> The value (integer<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>ge;</span><span class="entity"><span>&</span>nbsp;</span>0) specifies the duration of the animation, in milliseconds.
<span id="line886"></span> 0 for no animation.
<span id="line887"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line888"></span> Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror.
<span id="line889"></span> These fall back to normal, non-animated behaviour.
<span id="line890"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line891"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line892"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line893"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line894"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value"> Tip('Fade-out animation', FADEOUT, 1000, PADDING, 10);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FADEOUT</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line895"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line896"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line897"></span> Fade-out animation.
<span id="line898"></span> The value (integer<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>ge;</span><span class="entity"><span>&</span>nbsp;</span>0) specifies the duration of the animation, in milliseconds.
<span id="line899"></span> 0 for no animation.
<span id="line900"></span> Recommended: combine with
<span id="line901"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FADEIN</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line902"></span> Note that a small animation duration of 100 ms (recommended) is globally preset in wz_tooltip.js.
<span id="line903"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line904"></span> Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror.
<span id="line905"></span> These fall back to normal, non-animated behaviour.
<span id="line906"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line907"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line908"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line909"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line910"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value"> Tip('Tooltip at fixed position', FIX, FixCalcXY(this));</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FIX</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line911"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line912"></span> Mode 1: Fixed x and y coordinates.
<span id="line913"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line914"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line915"></span> Shows the tooltip at the fixed coordinates [x, y].
<span id="line916"></span> Value: Two comma-separated integers in square brackets.
<span id="line917"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line918"></span> Example:</span><span><<span class="start-tag">br</span>></span><span>
<span id="line919"></span> </span><span><<span class="start-tag">tt</span>></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', FIX, [230, 874])<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line920"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line921"></span> You can also call function(s) defined elsewhere that calculate the coordinates dynamically:
<span id="line922"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line923"></span> </span><span><<span class="start-tag">tt</span>></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Text', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line924"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line925"></span> or
<span id="line926"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line927"></span> </span><span><<span class="start-tag">tt</span>></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Text', FIX, CalcFixXY(), ABOVE, true)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line928"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line929"></span> In the latter example, the function CalcFixXY() must return an array containing the two numbers.
<span id="line930"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line931"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line932"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line933"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line934"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value"> Tip('Tooltip positioned at the <strong>bottom</strong> edge of the light-purple SPAN element', FIX, ['PurpleSpan', 0, 0], WIDTH, 200);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FIX</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line935"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line936"></span> Mode 2: Fixed position at a certain HTML element.
<span id="line937"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line938"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line939"></span> Displays the tooltip at any desired </span><span><<span class="start-tag">span</span> <span class="attribute-name">id</span>="<a class="attribute-value">PurpleSpan</a>" <span class="attribute-name">style</span>="<a class="attribute-value">background:#ffcccc;</a>"></span><span>HTML<span class="entity"><span>&</span>nbsp;</span>element</span><span></<span class="end-tag">span</span>></span><span> - optionally even a different one than Tip() is called from.
<span id="line940"></span> Value: Three comma-separated values in square brackets.
<span id="line941"></span> 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).
<span id="line942"></span> The second and third value (integers) define the horizontal and vertical offset of the tooltip from the left-bottom corner of the HTML element.
<span id="line943"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line944"></span> Example 1, ID of HTML element:
<span id="line945"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line946"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line947"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line948"></span> </span><span><<span class="start-tag">tt</span>></span><span>... onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', FIX, ['PurpleSpan', 0, 5])<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line949"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line950"></span> </span><span><<span class="start-tag">tt</span>></span><span>...</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line951"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line952"></span> </span><span><<span class="start-tag">tt</span>></span><span><span class="entity"><span>&</span>lt;</span>span id=<span class="entity"><span>&</span>quot;</span>PurpleSpan<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>HTML element to show the tooltip on<span class="entity"><span>&</span>lt;</span>/span<span class="entity"><span>&</span>gt;</span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line953"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line954"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line955"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line956"></span> This code snippet lets the tooltip appear 5 pixels below the bottom edge of the SPAN element.
<span id="line957"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line958"></span> Example 2, direct reference to HTML element:
<span id="line959"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">class</span>="<a class="attribute-value">sample</a>"></span><span>
<span id="line960"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line961"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line962"></span> </span><span><<span class="start-tag">tt</span>></span><span><span class="entity"><span>&</span>lt;</span>a href=<span class="entity"><span>&</span>quot;</span>...<span class="entity"><span>&</span>quot;</span> onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', FIX, [this, 0, 5], ABOVE, true)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line963"></span> </span><span><<span class="start-tag">tt</span>></span><span>onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span>Link<span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line964"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line965"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line966"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line967"></span> This code snippet displays the tooltip directly at the HTML element (link) hovered with the mouse.
<span id="line968"></span> As reference, we use the JavaScript keyword this - which automatically points to the HTML element the JavaScript eventhandler (e.g. onmouseover) stands in.
<span id="line969"></span> Additionally, the ABOVE command is used in order
<span id="line970"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value"> Tip('Tooltip positioned at the <strong>top</strong> edge of the hovered HTML element', FIX, [this, 0, 0], WIDTH, 200, ABOVE, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>to place the tooltip at the top edge</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line971"></span> of the HTML element.
<span id="line972"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line973"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line974"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line975"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line976"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FOLLOWMOUSE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line977"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line978"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line979"></span> The tooltip follows the movements of the mouse.
<span id="line980"></span> Value: true, false. Default: true.
<span id="line981"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line982"></span> When turning this off by applying the value false,
<span id="line983"></span> the tooltip behaves like OS-based tooltips, which usually don't follow the mouse.
<span id="line984"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line985"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line986"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line987"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line988"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Altered font color', FONTCOLOR, '#ff0000');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FONTCOLOR</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line989"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line990"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line991"></span> Font color.
<span id="line992"></span> Value: HTML color, in single quotes, e.g. '#990099'
<span id="line993"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line994"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line995"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line996"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line997"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Changed font face', FONTFACE, 'Courier New, Courier, mono');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FONTFACE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line998"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line999"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1000"></span> Font face (font family).
<span id="line1001"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1002"></span> Value:
<span id="line1003"></span> As you'd specify it in HTML or CSS, enclosed with single quotes, e.g.
<span id="line1004"></span> </span><span><<span class="start-tag">tt</span>></span><span>Tip('Some text', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '12pt')</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1005"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1006"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1007"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1008"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1009"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Oops...', FONTSIZE, '72pt');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FONTSIZE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1010"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1011"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1012"></span> Font size.
<span id="line1013"></span> Value: Size with unit, in single quotes.
<span id="line1014"></span> Unit ('px', 'pt', 'em' etc.) is mandatory.
<span id="line1015"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1016"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1017"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1018"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1019"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('FONTWEIGHT, \'bold\'', FONTWEIGHT, 'bold');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>FONTWEIGHT</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1020"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1021"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1022"></span> Font weight.
<span id="line1023"></span> Value: 'normal' or 'bold', in single quotes.
<span id="line1024"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1025"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1026"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1027"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1028"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('HEIGHT, 90<br><span class="entity"><span>&</span>nbsp;</span><br>As you can see by this example that contains lengthy text, a scrollbar is displayed once the height of the tooltip content exceeds the specified height', FONTSIZE, '12pt', HEIGHT, 90, WIDTH, 240, TITLE, 'Limited Height', CLOSEBTN, true, STICKY, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>HEIGHT</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1029"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1030"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1031"></span> Height of the tooltip body, without title, shadows etc..
<span id="line1032"></span> Value: Any integer.
<span id="line1033"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1034"></span> If 0 (the preset default), the height is automatically adapted to the content of the tooltip.
<span id="line1035"></span> A negative number (e.g. -100) specifies a maximum limit for the automatic adaption
<span id="line1036"></span> (in this example the height won't ever go beyond 100 pixels).
<span id="line1037"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1038"></span> Note that the tooltips follow the W3C box model,
<span id="line1039"></span> which means that the specified height applies to the actual content of the tooltip only,
<span id="line1040"></span> excluding padding (see PADDING command), border and shadow.
<span id="line1041"></span> If the height of the tooltip content exceeds the specified height, the tooltip is featured with a vertical scrollbar.
<span id="line1042"></span> 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.
<span id="line1043"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1044"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1045"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1046"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1047"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Jumping', JUMPHORZ, true, LEFT, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>JUMPHORZ</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1048"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1049"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1050"></span> Value: true, false.
<span id="line1051"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Test again.</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1052"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1053"></span> If true: When touching the window boundary, the tooltip jumps horizontally to the other side of the mouse.
<span id="line1054"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1055"></span> If false (preset default in wz_tooltip.js): The tooltip just stops by the right (or left) window boundary.
<span id="line1056"></span> In either case, the tooltip is prevented from extending past the window boundary.
<span id="line1057"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1058"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1059"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1060"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1061"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>JUMPVERT</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1062"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1063"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1064"></span> When it touches the bottom (or top) window boundary, the tooltip jumps vertically to the other side of the mouse.
<span id="line1065"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1066"></span> Value: true, false.
<span id="line1067"></span> This behaviour is on (true) by default (preset in wz_tooltip.js).
<span id="line1068"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1069"></span> </span><span><<span class="start-tag">strong</span>></span><span>Important:</span><span></<span class="end-tag">strong</span>></span><span>
<span id="line1070"></span> At least either JUMPVERT or JUMPHORZ behaviour, or both, should be true,
<span id="line1071"></span> 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.
<span id="line1072"></span> Recommended and preset in wz_tooltip.js: JUMPVERT true, JUMPHORZ false.
<span id="line1073"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1074"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1075"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1076"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>
<span id="line1077"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('On the other side', LEFT, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>LEFT</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1078"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1079"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1080"></span> Tooltip positioned on the left side of the mousepointer.
<span id="line1081"></span> Value: true, false.
<span id="line1082"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1083"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('LEFT and ABOVE combined...', LEFT, true, ABOVE, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>LEFT and ABOVE commands combined</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line1084"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line1085"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1086"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', LEFT, true, ABOVE, true)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1087"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1088"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1089"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1090"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1091"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Increased horizontal offset from the mouse', OFFSETX, 150);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>OFFSETX</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1092"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1093"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1094"></span> Horizontal offset from mouse-pointer.
<span id="line1095"></span> Value: Any integer. May also be negative.
<span id="line1096"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1097"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1098"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1099"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1100"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Increased vertical distance from the mouse', OFFSETY, 70);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>OFFSETY</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1101"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1102"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1103"></span> Vertical offset from the mouse-pointer.
<span id="line1104"></span> Value: Any integer. May also be negative.
<span id="line1105"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1106"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1107"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1108"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1109"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('A semi-transparent Tooltip', OPACITY, 70, PADDING, 14);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>OPACITY</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1110"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1111"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1112"></span> Transparency of tooltip.
<span id="line1113"></span> Value: Integer between 0 (fully transparent) and 100 (opaque, no transparency).
<span id="line1114"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1115"></span> Opacity is the opposite of transparency, i.e.</span><span><<span class="start-tag">br</span>></span><span>
<span id="line1116"></span> opacity<span class="entity"><span>&</span>nbsp;</span>=<span class="entity"><span>&</span>nbsp;</span>100<span class="entity"><span>&</span>nbsp;</span>-<span class="entity"><span>&</span>nbsp;</span>transparency<span class="entity"><span>&</span>nbsp;</span>(in<span class="entity"><span>&</span>nbsp;</span>percent).</span><span><<span class="start-tag">br</span>></span><span>
<span id="line1117"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Another example</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1118"></span> 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.
<span id="line1119"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1120"></span> Not supported in Opera prior to v.9.0, old versions of Safari and some versions of Konqueror.
<span id="line1121"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1122"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1123"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1124"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1125"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Tip with plenty of padding around its content', PADDING, 30);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>PADDING</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1126"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1127"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1128"></span> Inner spacing of tooltip, between border and content.
<span id="line1129"></span> Value: Integer <span class="entity"><span>&</span>ge;</span> 0.
<span id="line1130"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1131"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1132"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1133"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1134"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('SHADOW, true', SHADOW, true);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>SHADOW</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1135"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1136"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1137"></span> Tooltip drops a shadow.
<span id="line1138"></span> Value: true, false
<span id="line1139"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1140"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1141"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1142"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1143"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('This one drops a shadow (SHADOW command),<br>and its shadow color has been changed (SHADOWCOLOR command)', PADDING, 8, SHADOW, true, SHADOWCOLOR, '#dd99aa');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>SHADOWCOLOR</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1144"></span> </span><span class="comment"><!--br>
<span id="line1145"></span> <form> &nbsp; &nbsp; <select><option>aaa</option><option>bbb</option><option>ccc</option></select></form--></span><span>
<span id="line1146"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1147"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1148"></span> Shadow color.
<span id="line1149"></span> Value: HTML color, in single quotes.
<span id="line1150"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line1151"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1152"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', SHADOW, true, SHADOWCOLOR, '#dd99aa')<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1153"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1154"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1155"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1156"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1157"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Increased shadow width', SHADOW, true, SHADOWWIDTH, 10, PADDING, 8);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>SHADOWWIDTH</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1158"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1159"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1160"></span> Shadow width (offset).
<span id="line1161"></span> Value: Integer<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>ge;</span><span class="entity"><span>&</span>nbsp;</span>0.
<span id="line1162"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line1163"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1164"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', SHADOW, true, SHADOWWIDTH, 7)<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1165"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1166"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1167"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1168"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1169"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>STICKY</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1170"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1171"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1172"></span> The tooltip stays fixed at its initial position until another tooltip pops up.
<span id="line1173"></span> Value: true, false.
<span id="line1174"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1175"></span> With
<span id="line1176"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>DURATION</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1177"></span> you can enforce the tooltip to disappear after a certain time span.
<span id="line1178"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1179"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1180"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1181"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1182"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>TEXTALIGN</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1183"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1184"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1185"></span> Aligns the text in the body of the tooltip.
<span id="line1186"></span> Value: 'right', 'center',
<span id="line1187"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>'justify'</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1188"></span> or 'left'.
<span id="line1189"></span> </span><span><<span class="start-tag">br</span>></span><span>Example:
<span id="line1190"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1191"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', TEXTALIGN, 'right')<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1192"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1193"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1194"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1195"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1196"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('TITLE, \'Some title\'', TITLE, 'Some title');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>TITLE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1197"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1198"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1199"></span> Displays a titlebar.
<span id="line1200"></span> Value: Text to display, in single quotes.
<span id="line1201"></span> May even contain HTML, which gives you additional freedom in fashioning the titlebar.
<span id="line1202"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1203"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1204"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1205"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1206"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>TITLEALIGN</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1207"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1208"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1209"></span> Aligns the text in the titlebar.
<span id="line1210"></span> Value: 'right', 'center', 'justify' or 'left'
<span id="line1211"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1212"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1213"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1214"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1215"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('TITLEBGCOLOR, \'#990099\'', TITLE, 'Title background', TITLEBGCOLOR, '#990099');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>TITLEBGCOLOR</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1216"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1217"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1218"></span> Backgroundcolor of the titlebar.
<span id="line1219"></span> Value: HTML color, in single quotes.
<span id="line1220"></span> If it's an empty string </span><span><<span class="start-tag">tt</span>></span><span>''</span><span></<span class="end-tag">tt</span>></span><span>,
<span id="line1221"></span> the border color (see also BORDERCOLOR command) is used (this is the default).
<span id="line1222"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1223"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1224"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1225"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1226"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('TITLEFONTCOLOR, \'#ff6666\'', TITLE, 'Red title', TITLEFONTCOLOR, '#ff6666');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>TITLEFONTCOLOR</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1227"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1228"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1229"></span> Color of title text.
<span id="line1230"></span> Value: HTML color, in single quotes.
<span id="line1231"></span> If it's an empty string </span><span><<span class="start-tag">tt</span>></span><span>''</span><span></<span class="end-tag">tt</span>></span><span>, the backgroundcolor of the tooltip body (see also BGCOLOR command) is used (this is the default).
<span id="line1232"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1233"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1234"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1235"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1236"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('TITLEFONTFACE, \'Courier New, Courier, mono\'', TITLE, 'Changed Title Font', TITLEFONTFACE, 'Courier New, Courier, mono');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>TITLEFONTFACE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1237"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1238"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1239"></span> Font face for title text.
<span id="line1240"></span> Value: Like in HTML or CSS. Enclosed with single quotes.
<span id="line1241"></span> If the value is an empty string </span><span><<span class="start-tag">tt</span>></span><span>''</span><span></<span class="end-tag">tt</span>></span><span>, the tooltip body font, in boldified form, is used (this is the default).
<span id="line1242"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1243"></span> Example:
<span id="line1244"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1245"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">font-size:12px;</a>"></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text', TITLE, 'Some Title', TITLEFONTFACE, 'Verdana,sans-serif')<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1246"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1247"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1248"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1249"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1250"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1251"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('TITLEFONTSIZE, \'18pt\'', TITLE, 'Big Title', TITLEFONTSIZE, '18pt');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>TITLEFONTSIZE</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1252"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1253"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1254"></span> Font size of title text.
<span id="line1255"></span> Value: Size with unit, in single quotes.
<span id="line1256"></span> Unit ('px', 'pt', 'em' etc.) is mandatory.
<span id="line1257"></span> If the value is an empty string </span><span><<span class="start-tag">tt</span>></span><span>''</span><span></<span class="end-tag">tt</span>></span><span>, the fontsize of the tooltip body is applied.
<span id="line1258"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1259"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1260"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1261"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1262"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('This tooltip has a caption with<br>plenty of padding', TITLE, 'Padded Title', TITLEPADDING, 8);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>TITLEPADDING</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1263"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1264"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1265"></span> Padding around the title.
<span id="line1266"></span> Value: Integer<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>ge;</span><span class="entity"><span>&</span>nbsp;</span>0.
<span id="line1267"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1268"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1269"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>" <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line1270"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1271"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('WIDTH, 200', WIDTH, 200);</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>WIDTH</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1272"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1273"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1274"></span> Width of tooltip.
<span id="line1275"></span> Value: Any integer.
<span id="line1276"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1277"></span> If 0 (the preset default), the width is automatically adapted to the content of the tooltip.
<span id="line1278"></span> A negative number (e.g. -240) specifies a maximum limit for the automatic adaption
<span id="line1279"></span> (in this example the width won't ever go wider than 240 pixels).
<span id="line1280"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1281"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nodeco</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">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 <span class="entity"><span>&</span>amp;</span>lt;br<span class="entity"><span>&</span>amp;</span>gt; HTML tags inside the text of this tooltip.', WIDTH, -1, TITLE, 'Width Determined By Extent Of Title');</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>A value of -1 for WIDTH</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1282"></span> has a special meaning:
<span id="line1283"></span> In this case the width of the tooltip is determined by the extent of the title.
<span id="line1284"></span> That is, the tooltip will be as wide as the title plus, if specified, the closebutton.
<span id="line1285"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1286"></span> Note that the tooltips follow the W3C box model,
<span id="line1287"></span> which means that the specified width applies to the actual content of the tooltip,
<span id="line1288"></span> excluding padding (see PADDING command), border and shadow.
<span id="line1289"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1290"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1291"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1292"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1293"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1294"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1295"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1296"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">50</a>"></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line1297"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1298"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1299"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line1300"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1301"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">150</a>" <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line1302"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>" <span class="attribute-name">width</span>="<a class="attribute-value">122</a>"></span><span>
<span id="line1303"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1304"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1305"></span>
<span id="line1306"></span>
<span id="line1307"></span>
<span id="line1308"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1309"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1310"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1311"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1312"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>"></span><span>
<span id="line1313"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line1314"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1315"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1316"></span> </span><span><<span class="start-tag">big</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">extensions</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Extensions</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line1317"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1318"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line1319"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1320"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1321"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1322"></span> Visit the </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/extensions.htm">extensions.htm</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">TagToTip('T2TExtensions', ABOVE, true, OFFSETX, -17, BALLOON, true)</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Extensions page</span><span></<span class="end-tag">a</span>></span><span> for additional configuration options.
<span id="line1323"></span> </span><span><<span class="start-tag">span</span> <span class="attribute-name">id</span>="<a class="attribute-value">T2TExtensions</a>"></span><span>These </span><span><<span class="start-tag">b</span>></span><span>plugins</span><span></<span class="end-tag">b</span>></span><span> provide more configuration options,</span><span><<span class="start-tag">br</span>></span><span>for example a balloon tooltip style like this.</span><span></<span class="end-tag">span</span>></span><span>
<span id="line1324"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1325"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line1326"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1327"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1328"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1329"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">download</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1330"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/redarrow.gif">../images/redarrow.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">15</a>" <span class="attribute-name">height</span>="<a class="attribute-value">13</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>Download</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line1331"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1332"></span> wz_tooltip.js 5.31, published under the </span><span><<span class="start-tag">b</span>></span><span>LGPL</span><span></<span class="end-tag">b</span>></span><span>:</span><span><<span class="start-tag">br</span>></span><span>
<span id="line1333"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Contains wz_tooltip.js')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/scripts/wz_tooltip.zip">../scripts/wz_tooltip.zip</a>"></span><span>wz_tooltip.zip</span><span></<span class="end-tag">a</span>></span><span> (16 KB)
<span id="line1334"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1335"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/history.htm">history.htm</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">Tip('Read this if you\'re not sure about the benefits from an update :-)')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>history.htm</span><span></<span class="end-tag">a</span>></span><span> (Changelog of wz_tooltip.js)
<span id="line1336"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1337"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">style</span>="<a class="attribute-value">padding:5px;border-style:solid;border-width:1px;border-color:#000099;</a>"></span><span>
<span id="line1338"></span> </span><span><<span class="start-tag">strong</span>></span><span>Important notes for users of previous versions</span><span></<span class="end-tag">strong</span>></span><span>
<span id="line1339"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1340"></span> Starting with version 5.0, an onmouseout attribute is required for each HTML tag that has a tooltip.
<span id="line1341"></span> Example:
<span id="line1342"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1343"></span> </span><span><<span class="start-tag">tt</span>></span><span><span class="entity"><span>&</span>lt;</span>a</span><span></<span class="end-tag">tt</span>></span><span> </span><span><<span class="start-tag">tt</span>></span><span>href=<span class="entity"><span>&</span>quot;</span>index.htm<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">tt</span>></span><span> </span><span><<span class="start-tag">tt</span>></span><span>onmouseover=<span class="entity"><span>&</span>quot;</span>Tip('Some text')<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">tt</span>></span><span> </span><span><<span class="start-tag">tt</span>></span><span>onmouseout=<span class="entity"><span>&</span>quot;</span>UnTip()<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span></span><span></<span class="end-tag">tt</span>></span><span> </span><span><<span class="start-tag">tt</span>></span><span>Home</span><span></<span class="end-tag">tt</span>></span><span> </span><span><<span class="start-tag">tt</span>></span><span><span class="entity"><span>&</span>lt;</span>/a<span class="entity"><span>&</span>gt;</span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line1344"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1345"></span> Simply call UnTip() from inside those onmouseout attributes. See also documentation above.
<span id="line1346"></span> 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.
<span id="line1347"></span> </span><span></<span class="end-tag">div</span>></span><span>
<span id="line1348"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1349"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>Old Version</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line1350"></span> 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:
<span id="line1351"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1352"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip_old/tooltip_e.htm">../tooltip_old/tooltip_e.htm</a>"></span><span>Documentation and download of wz_tooltip.js v.3.45</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1353"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1354"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>Donation</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line1355"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1356"></span> Financial support for the very numerous hours of development and for the costs of hosting this website is welcome.</span><span><<span class="start-tag">br</span>></span><span>
<span id="line1357"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1358"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1359"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">width</span>="<a class="attribute-value">150</a>" <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line1360"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">3</a>"></span><span>
<span id="line1361"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line1362"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">DHTML: Tooltips per JavaScript</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line1363"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line1364"></span> </span><span><<span class="start-tag">small</span>></span><span>
<span id="line1365"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1366"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#top">#top</a>"></span><span>Top of page</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1367"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1368"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#features">#features</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('features')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Features</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1369"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1370"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#browser">#browser</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('browser')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Cross Browser</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1371"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1372"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#docu">#docu</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('docu')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Documentation</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1373"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1374"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#extensions">#extensions</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('extensions')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Extensions</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1375"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1376"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://walterzorn.de/en/tooltip/tooltip_e.htm#download">#download</a>" <span class="attribute-name">onmouseover</span>="<a class="attribute-value">MyTip('download')</a>" <span class="attribute-name">onmouseout</span>="<a class="attribute-value">UnTip()</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line1377"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line1378"></span> </span><span></<span class="end-tag">small</span>></span><span>
<span id="line1379"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1380"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1381"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1382"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1383"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1384"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1385"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line1386"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line1387"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line1388"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">small</span>></span><span>Walter Zorn
<span id="line1389"></span> </span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.kreuzotter.de/impressum.htm">http://www.kreuzotter.de/impressum.htm</a>"></span><span>Impressum and about this page</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">small</span>></span><span>
<span id="line1390"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line1391"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line1392"></span> </span><span></<span class="end-tag">center</span>></span><span>
<span id="line1393"></span></span><span></<span class="end-tag">body</span>></span><span>
<span id="line1394"></span></span><span></<span class="end-tag">html</span>></span><span></span></pre></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