HTML Translucent Tooltip

Move your mouse over following lines: Line One Line Two

Here is the complete HTML for the file. Make sure you specify proper path for the Tooltip.js file. Translucency is obtained by using the 'alpha' filter in IE and simply setting 'opacity' in style for FireFox.
<html>
<head>
<title>HTML Translucent Tooltip</title>
</head>
<LINK rel="stylesheet" type="text/css" href="styles/StyleSheet.css">
<script language="javascript" src="js/Tooltip.js"></script>
<body onload=init()>

<STRONG>
Move your mouse over following lines:<br><br>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>
Line One
</span><br>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)>
Line Two
</span>
</STRONG>

<div id="a" style="background-color:skyblue;width: 184px; height: 49px;border: solid 1px gray; text-align: center;filter: alpha(Opacity=75);opacity:0.75">
Translucent tooltip !
</div>

</body>
<script>
var t1=null;
var l1="Tooltip for line one";
var l2="Tooltip for line two";
function init()
{
 t1 = new ToolTip("a",true,40);
}
</script>
</html>



Copyright (c) 2007-2017 Ashish Patil . Please read FAQ for more details.

comments powered by Disqus