Animated Javascript 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. To animate the appearing of tooltip , simply pass the second parameter of the constructor as 'true', followed by an integer specifying speed of animation.
<html>
<head>
<title>Animated Javascript 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:ivory;width: 150px; height: 49px;border: solid 1px gray; text-align: center;">

</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