Walter Zorn Examples  2007-07-01

Dont forget to include: <script type="text/javascript" src="./js/wz_tooltip.js">

<a href="javascript:void(0);" onmouseover="Tip('This is a tooltip')">simpleExample</a>

<a href="javascript:void(0)"
 onmouseover="Tip('Text with line<br>break, enforced by an <br> HTML tag')">
ExampleWithLineBreak
</a>

<a href="javascript:void(0)"
 onmouseover="Tip('<table border=\'0\' cellspacing=\'5\'>HTML table in tooltip<\/th><\/tr>Row 2, Cell 1<\/td>Row 2, Cell 2<\/td><\/tr>Row 3, Cell 1<\/td>Row 3, Cell 2<\/td><\/tr><\/table>')">
tableExample
</a>

<a href="javascript:void(0);"
onmouseover="Tip('Tooltip with altered font and colors', TITLE, 'This one has a title', BGCOLOR, '#ffcccc', FONTCOLOR, '#800000', FONTSIZE, '9pt', FONTFACE, 'Courier New, Courier, mono', BORDERCOLOR, '#c00000')">
TitleExample
</a>

<a href="javascript:void(0);"
 onmouseover="Tip('Fade-in, Fade-out, Above example', WIDTH, 250, ABOVE, true, OFFSETX, 1, FADEIN, 400, FADEOUT, 300)">
FadeInFadeOutExample
</a>


ToolTipWithImages
<a href="javascript:void(0);" onmouseover="Tip('Tooltip containing an image, inserted into the tooltip text via < img > tag
<img src="./images/flower.jpg" height="103" width="130">', WIDTH, 130, PADDING, 6, BGCOLOR, '#ffffff')">ToolTipWithImages</a>






Note: for balloon examples, the Balloon Extension Zip must be included, along with eleven gif files, and all need to go into a directory pointed to by the BalloonImgPath variable in the tip_balloon.js file.

Dont forget to include: <script type="text/javascript" src="./js/tip_balloon.js">

<a href="javascript:void(0)"
 onmouseover="Tip('This is a <b>balloon tooltip</b><br>one<br>two<br>three', BALLOON, true, ABOVE, true, OFFSETX, -10, WIDTH, 200, TEXTALIGN, 'justify', FADEIN, 600, FADEOUT, 600, PADDING, 8)">
BalloonExample
</a>

<a href="javascript:void(0);" onmouseover="TagToTip('T2TExtensions', ABOVE, true, OFFSETX, -10, BALLOON, true, FADEIN, 400, FADEOUT, 400)">
AnotherBalloonExample</a>
<span id="T2TExtensions">These <b>plugins</b> provide more configuration options,<br> for example a balloon tooltip style like this.</span>