Tooltip javascript and CSS JavaScript, DHTML Tooltips
This tooltips are developed by: Walter Zorn
Web page (contains the javascripts download, implementantion, and examples):
www.walterzorn.de/tooltip/tooltip.htm
----------------------------------------------------------
For this Tooltip page examples i used :
js scripts:
- this 2 javascripts ( click here to copy )
css:
.tt {
FONT-SIZE: 12px
}
.sample {
BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 3px; BACKGROUND: #eeeeee; PADDING-BOTTOM: 3px; BORDER-LEFT: #000099 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #000099 1px solid
}
#T2tDirect {
BORDER-RIGHT: red 2px solid; PADDING-RIGHT: 3px; BORDER-TOP: red 2px solid; PADDING-LEFT: 3px; BACKGROUND: yellow; PADDING-BOTTOM: 3px; BORDER-LEFT: red 2px solid; PADDING-TOP: 3px; BORDER-BOTTOM: red 2px solid
}
implementation script
- create 2 javascript pages named tip_balloon.js and wz_tooltip.js
Include tis scripts before the </body> tag
Eg:
<script language="javascript" type="text/javascript" src="tip_balloon.js "></script>
<script language="javascript" type="text/javascript" src="wz_tooltip.js"></script>
</body>
Codes
-Each example has implementation code under the link ;
=================================
Examples:
( To see the effect put the mouse over the each link )
breaks tooltip forced by <br>
<A onmouseover="Tip('Text with line<br>break, enforced by a &lt;br&gt; HTML tag')"
onmouseout=UnTip() class="mov11" href="javascript:void(0)">breaks tooltip forced by <br></A>
images
<A onmouseover="Tip('Tooltip containing an image, inserted into the tooltip text via &lt;img&gt; tag<br><img src=../../userfiles/image/frown.gif >', WIDTH, 150, PADDING, 6, BGCOLOR, '#ffffff')" onmouseout=UnTip() href="javascript:void(0);">images</A>
tables
<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>
customize
<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>
commands
<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="http://www.walterzorn.com/tooltip/tooltip_e.htm#docu">commands</A>
ABOVE
BGCOLOR
BGIMG
BORDERCOLOR
BORDERSTYLE
BORDERWIDTH
CENTERMOUSE
CLICKCLOSE
CLICKSTICKY
CLOSEBTN
CLOSEBTNCOLORS
CLOSEBTNTEXT
DELAY
DURATION
EXCLUSIVE
FADEIN
FADEOUT
FOLLOWMOUSE
FONTCOLOR
FONTFACE
FONTSIZE
FONTWEIGHT
HEIGHT
JUMPHORZ
JUMPVERT
LEFT
OFFSETX
OFFSETY
OPACITY
PADDING
SHADOW
SHADOWCOLOR
SHADOWWIDTH
STICKY
TEXTALIGN
TITLE
TITLEALIGN
TITLEBGCOLOR
TITLEFONTCOLOR
TITLEFONTFACE
TITLEFONTSIZE
TITLEPADDING
WIDTH
top