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.
<title>Animated Javascript Tooltip</title>
<LINK rel="stylesheet" type="text/css" href="styles/StyleSheet.css">
<script language="javascript" src="js/Tooltip.js"></script>
<body onload=init()>

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 class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)>
Line Two

<div id="a" style="background-color:ivory;width: 150px; height: 49px;border: solid 1px gray; text-align: center;">


var t1=null;
var l1="Tooltip for line one";
var l2="Tooltip for line two";
function init()
 t1 = new ToolTip("a",true,40);

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

comments powered by Disqus