<html>
<head>
<script language="javascript">
/*===========================================================*/
function M_OVER() {
var OBJ = document.getElementById("obj") /* THE OBJECT */
var TT = document.getElementById("TT") /* TOOL TIP */
var TXT = document.getElementById("TXT") /* TOOLTIP TEXT */
var DRT = document.getElementById("DRT").value /* TOOLTIP DURATION */
var R1 = document.getElementsByName("r1")
TT.innerHTML = TXT.value ;
TT.style.visibility="visible" ;
x1 = parseInt(obj.style.top.replace(/px/i,"")) ;
x2 = parseInt(obj.style.left.replace(/px/i,"")) ;
x3 = parseInt(obj.clientHeight) ;
x4 = parseInt(obj.clientWidth) ;
x5 = parseInt(TT.clientHeight) ;
x6 = parseInt(TT.clientWidth) ;
if (R1.item(0).checked) {
TT.style.top = x1 + x3 ;
TT.style.left = x2 - x6 ;
}
if (R1.item(1).checked) {
TT.style.top = x1 + x3 ;
TT.style.left = x2 + x4 ;
}
if (R1.item(2).checked) {
TT.style.top = x1 - x5 ;
TT.style.left = x2 - x6 ;
}
if (R1.item(3).checked) {
TT.style.top = x1 - x5 ;
TT.style.left = x2 + x4 ;
}
var TID = self.setTimeout('TT.style.visibility="hidden"',parseInt(DRT)) ;
}
/*===========================================================*/
</script>
</head>
<body>
<fieldset style="padding: 2" id="rad">
<legend align=center >Select the position of tooltip and then move the mouse over the picture!</legend>
<div align="center">
<table border="0" width="90%" id="table1">
<tr>
<td>Duration in MiliSeconds: <input type=text id="DRT" value="6000"></td>
<td>Text: <input type=text id="TXT" value="Write Your Text Here"></td>
<td><input type=radio name=r1 value="BL" checked> Bottom Left</td>
<td><input type=radio name=r1 value="BR"> Bottom Right</td>
<td><input type=radio name=r1 value="TL"> Top Left</td>
<td><input type=radio name=r1 value="TR"> Top Right</td>
</tr>
</table>
</div>
</fieldset>
<div id="obj"
style=" visibility:visible ;
top:200 ;
left:400 ;
position:absolute ;
border=1 ;
border-style:solid ;
bordercolor=black ;
background-color:tan"
onMouseOver="M_OVER();"
onMouseOut="document.getElementById('TT').style.visibility='hidden'">
<img name="img" src="print.gif" width="80" height="50">
</div>
<div id="TT"
style=" visibility:hidden ;
top:1 ;
left:1 ;
position:absolute ;
border=1 ;
border-style:solid ;
bordercolor=black ;
background-color:yellow">
</div>
</body>
</html>
