<html >
<head>
<style type="text/css">
.tooltip{
position:absolute;
background: #EAF3FA;
padding:2px 5px;
border:4px solid #0099FF;
display:none;
}
</style>
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div onMouseOver="popin(event);" onMouseOut="popout();">Mouse Over On Me!!!!!</div>
<div class="tooltip" id="pop">
Hai this is sample tootip //This is div for tool tip box..
</div>
</body>
</html>
<script type="text/javascript">
xOffset = 5;
yOffset = 5;
function popin(e)
{
$("#pop")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
}
function popout()
{
$("#pop").fadeOut("fast");
}
</script>
Copy and paste . Then Save & Run above code..
<head>
<style type="text/css">
.tooltip{
position:absolute;
background: #EAF3FA;
padding:2px 5px;
border:4px solid #0099FF;
display:none;
}
</style>
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div onMouseOver="popin(event);" onMouseOut="popout();">Mouse Over On Me!!!!!</div>
<div class="tooltip" id="pop">
Hai this is sample tootip //This is div for tool tip box..
</div>
</body>
</html>
<script type="text/javascript">
xOffset = 5;
yOffset = 5;
function popin(e)
{
$("#pop")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
}
function popout()
{
$("#pop").fadeOut("fast");
}
</script>
Copy and paste . Then Save & Run above code..
