Simple Tool Tip jQuery Script – Download and use now!

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="http://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!

DemoDownload

Add a Comment

Your email address will not be published. Required fields are marked *