File: /home/posscale/public_html/templates/pos_scales/hover-tip.html
<html>
<head>
<title>Hover-Tip</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 }
/* Style spec's for tooltip */
div#tipDiv {
position:absolute; visibility:hidden; left:0; top:0; z-index:10000;
background-color:#dee7f7; border:1px solid #336;
width:260px; padding:6px;
color:#000; font-size:11px; line-height:1.3;
}
div#tipDiv a:link { color:#33b }
div#tipDiv a:visited { color:#339 }
</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 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!
*************************************************************************/
// adjust horizontal and vertical offsets here
// (distance from mouseover event which activates tooltip)
Tooltip.offX = 4;
Tooltip.offY = 4;
Tooltip.followMouse = false; // must be turned off for hover-tip
// tooltip content variables
var msgTips = 'Get the latest information about the <a href="http://www.dyn-web.com/dhtml/tooltips/">tooltips</a> currently available at <a href="http://www.dyn-web.com">dyn-web.com</a>.';
var msgTerms = 'The code is free for <a href="http://www.dyn-web.com/bus/terms.html#personal">personal use</a> but all other uses require purchase of a <a href="http://www.dyn-web.com/bus/purchase.html">license</a>.';
function doTooltip(e, msg) {
if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
Tooltip.clearTimer();
var tip = document.getElementById? document.getElementById(Tooltip.tipID): null;
if ( tip && tip.onmouseout == null ) {
tip.onmouseout = Tooltip.tipOutCheck;
tip.onmouseover = Tooltip.clearTimer;
}
Tooltip.show(e, msg);
}
function hideTip() {
if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
Tooltip.timerId = setTimeout("Tooltip.hide()", 300);
}
Tooltip.tipOutCheck = function(e) {
e = dw_event.DOMit(e);
// is element moused into contained by tooltip?
var toEl = e.relatedTarget? e.relatedTarget: e.toElement;
if ( this != toEl && !contained(toEl, this) ) Tooltip.hide();
}
// returns true of oNode is contained by oCont (container)
function contained(oNode, oCont) {
if (!oNode) return; // in case alt-tab away while hovering (prevent error)
while ( oNode = oNode.parentNode ) if ( oNode == oCont ) return true;
return false;
}
Tooltip.timerId = 0;
Tooltip.clearTimer = function() {
if (Tooltip.timerId) { clearTimeout(Tooltip.timerId); Tooltip.timerId = 0; }
}
Tooltip.unHookHover = function () {
var tip = document.getElementById? document.getElementById(Tooltip.tipID): null;
if (tip) {
tip.onmouseover = null;
tip.onmouseout = null;
tip = null;
}
}
dw_event.add(window, "unload", Tooltip.unHookHover, true);
</script>
</head>
<body onload="Tooltip.init()">
<h1>Tooltip You Can Hover Over</h1>
<p>This is a modified version of the <a href="tooltip.html" onmouseover="doTooltip(event, msgTips)" onmouseout="hideTip()">tooltip</a> with menu-like capabilities. The tooltip layer will remain visible while the viewer hovers over it. This allows you to place clickable links inside tooltip content. </p>
<p>Please read <a href="http://www.dyn-web.com/bus/terms.html" onmouseover="doTooltip(event, msgTerms)" onmouseout="hideTip()">Terms of Use</a>.</p>
<p> </p>
<p><a href="http://www.dyn-web.com">www.dyn-web.com</a></p>
</body>
</html>