File: /home/posscale/www/templates/pos_scales/tooltip.html
<html>
<head>
<title>DHTML Tooltip</title>
<style type="text/css">
body { font-family: verdana, arial, helvetica, sans-serif;
font-size: 14px; }
h1 { font-size:18px }
a:link { color:#33c }
a:visited { color:#339 }
/* This is where you can customize the appearance of the tooltip */
div#tipDiv {
position:absolute; visibility:hidden; left:0; top:0; z-index:10000;
background-color:#dee7f7; border:1px solid #336;
width:250px; padding:4px;
color:#000; font-size:11px; line-height:1.2;
}
/* These are optional. They demonstrate how you can individually format tooltip content */
div.tp1 { font-size:12px; color:#336; font-style:italic }
div.tp2 { font-weight:bolder; color:#337; padding-top:4px }
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/dw_tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at dyn-web.com
Copyright 2003-5 by Sharon Paine
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
function doTooltip(e, msg) {
if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
Tooltip.show(e, msg);
}
function hideTip() {
if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
Tooltip.hide();
}
// variables for tooltip content
var tipRich = '<div class="tp1">This text is in a div with it\'s own class for different style specifications than the tooltip. </div>';
var tipImg = '<div style="text-align:center"><img src="images/dot-com-btn.gif" width="176" height="30" alt="" border="0"></div>';
var tipImgTxt = '<img src="images/sm-duck.gif" width="90" height="44" alt="" border="0"><div class="tp2">Images and text can go together in a tooltip.</div>';
var tipTerms = "If you plan to use our code, please follow our terms. Thank you.";
</script>
</head>
<body onload="Tooltip.init()">
<h1>Tooltip</h1>
<p>The tooltip can contain
<a href="your.html" onmouseover="doTooltip(event,'Content for the tooltip can be placed in the link attribute or in a variable.')" onmouseout="hideTip()">plain text</a>,
<a href="some.html" onmouseover="doTooltip(event,tipRich)" onmouseout="hideTip()">rich html</a>,
<a href="#" onmouseover="doTooltip(event,tipImg)" onmouseout="hideTip()">images</a>, or
<a href="javascript: //" onmouseover="doTooltip(event,tipImgTxt)" onmouseout="hideTip()">images and text</a>.
</p>
<p><a href="http://www.dyn-web.com" onmouseover="doTooltip(event,'An image can have a tooltip too, of course.')" onmouseout="hideTip()"><img src="images/dot-com-btn.gif" width="176" height="30" alt="" border="0"></a></p>
<p>Please read dyn-web's <a href="http://www.dyn-web.com/bus/terms.html" onmouseover="doTooltip(event,tipTerms)" onmouseout="hideTip()">Terms of Use</a>.</p>
</body>
</html>