The
width of the tooltips is adapted automatically.
Of course you can also specify the width if you like to. The tooltips may contain plain text as well as HTML, lists etc.. If you like, you can
customize 
these crossbrowser JavaScript Tooltips and their
behavior in multiple ways. You can change the default configuration values inside the library itself (section GLOBAL TOOLTIP CONFIGURATION), or configure each tooltip individually by passing
commands to the onmouseover eventhandlers.
This Tooltip DHTML Library is even capable of dynamically converting arbitrary HTML elements to tooltips, which means you can put really important stuff into tooltips, since HTML content is relevant to web search engines.
Documentation.
Code
<script type="text/javascript" src="http://www.walterzorn.com/scripts/wz_tooltip.js"></script>
<div>The
<A onmouseover="TagToTip('T2TAdaptWidth')"
onmouseout=UnTip() href="javascript:void(0)">width</A> of the tooltips is adapted automatically.
<SPAN style="DISPLAY: none" id=T2TAdaptWidth>Of course you can also specify the width if you like to.
</SPAN> The tooltips may contain plain text as well as HTML, such as
<A onmouseover="Tip('Tooltip containing an image, inserted into the tooltip text via &lt;img&gt; \
tag<br><img src=http://www.walterzorn.com/images/tooltip/leop.jpg width=150 height=102>', WIDTH, 150, PADDING, 6, BGCOLOR, '#ffffff')"
onmouseout=UnTip() href="javascript:void(0);">images</A>, line
<A onmouseover="Tip('Text with line<br>break, enforced by a &lt;br&gt; HTML tag')"
onmouseout=UnTip() href="javascript:void(0)">breaks</A>,
<A onmouseover="Tip('<table border=\'0\' cellspacing=\'5\'><tr><th colspan=\'2\' style=\'font-size:8pt;background:#ffcccc;\'>\
HTML table in tooltip<\/th><\/tr><tr><td style=\'font-size:8pt;background:#ffffff;\'>Row 2, Cell 1<\/td>\
<td style=\'font-size:8pt;background:#ffffff;\'>Row 2, Cell 2<\/td><\/tr><tr><td style=\'font-size:8pt;background:#ffffff;\'>Row 3, Cell 1<\/td>\
<td style=\'font-size:8pt;background:#ffffff;\'>Row 3, Cell 2<\/td><\/tr><\/table>')"
onmouseout=UnTip() href="javascript:void(0)">tables</A>, lists etc.. If you like, you can
<A onmouseover="Tip('Tooltip with altered font and colors', TITLE, 'This one has a title', BGCOLOR, '#ffcccc', FONTCOLOR, '#800000',
FONTSIZE, '9pt', FONTFACE, 'Courier New, Courier, mono', BORDERCOLOR, '#c00000')"
onmouseout=UnTip() href="javascript:void(0);">customize</A>
<IMG onmouseover="Tip('Tooltip applied to an IMG tag, and animated using the FADEIN and FADEOUT commands. \
(That\'s me on a quick 200km trip with my homebuilt carbon lowracer.)', WIDTH, 300, FADEIN, 500, FADEOUT, 500)" title=""
onmouseout=UnTip() hspace=8 alt="" vspace=8 align=left
src="http://www.walterzorn.com/images/kreuzot_ss.jpg" width=200 height=105> these crossbrowser JavaScript Tooltips and their
<A onmouseover="Tip('A tooltip that fades in and out (FADEIN and FADEOUT commands) and is placed\
above the mousepointer (ABOVE command).', WIDTH, 250, ABOVE, true, OFFSETX, 1, FADEIN, 400, FADEOUT, 300)"
onmouseout=UnTip() href="javascript:void(0);">behavior</A>
in multiple ways. You can change the default configuration values inside the library itself
(section GLOBAL TOOLTIP CONFIGURATION), or configure each tooltip individually by passing
<A onmouseover="Tip('For examples on how to alter the behaviour and look of tooltips, \
see the <a href=\'#docu\'>documentation<\/a>', WIDTH, 300, TITLE, 'Tooltip Configuration',
SHADOW, true, FADEIN, 300, FADEOUT, 300, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true)"
onmouseout=UnTip() href="#docu">commands</A> to the onmouseover eventhandlers.
<BR> <BR>There are also
<A onmouseover="TagToTip('T2TBalloon', BALLOON, true, ABOVE, true, WIDTH, 260, PADDING, 8,
TEXTALIGN, 'justify', OFFSETX, -17)"
onmouseout=UnTip() href="#extensions">Extensions (plugins)</A>
available (or write your own!) which provide additional options to customize the tooltips.
<SPAN style="DISPLAY: none" id=T2TBalloon>For example, to create a <B>balloon tooltip</B>
like this one, just include the JavaScript plugin "tip_balloon.js" into your page and apply the
BALLOON command to the tooltip.</SPAN> <BR> <BR>This Tooltip DHTML Library is even capable of
dynamically converting arbitrary HTML elements to tooltips, which means you can put really important
stuff into tooltips, since HTML content is relevant to web search engines.
<A onmouseover="Tip('An HTML element can be converted to a tooltip just by its ID. See \
<a href=#docu>documentation<\/a>.', TITLE, 'Extended Possibilities', WIDTH, 300, SHADOW,
true, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true)" onmouseout=UnTip() href="#docu">Documentation</A>. </div>
