Hi dudes, today i have written a very simple tool-tip script where you can download this script and use it right away.
Read the comments to know the script!.
NOTE: See the demo at the bottom of the script.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--style for tool tip-->
<style>
#easytip{
position:absolute;
padding: 10px;
border: 5px solid gray;
background: lightyellow;
}
</style>
<script>
$(document).ready(function(){
//get the mouse position
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
//on hover the link show tip
$(".tipthis").mouseover(function(){
//create the tool tip div element
$("<div id='easytip'></div>").appendTo('body');
//get the text from rel attribute
$("#easytip").html($(this).attr('rel'));
$('#easytip').css({'display':'none','top':(mouseY + 10),'left':mouseX}).fadeIn('slow');
}).mouseout(function(){
$("#easytip").remove();
});
});
</script>
</head>
<body>
<!--Add rel and class='tipthis' to make it work, rel is the tool tip text-->
<a href="#" rel="This is first tip" class="tipthis">Tip 1</a>
<a href="#" rel="This is second tip" class="tipthis">Tip 2</a>
</body>
</html>
See the demo or download the code!
