Animated Javascript Tooltip

2006-12-30

Hover over ‘Line 1’ and ‘Line 2’ text to see the tooltip in action.

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>

Animated Javascript Tooltip

Line One

Line Two

About Me

Recents

Tag Cloud

Categories

Tags

Archives