12
Oct
2012

Simple ToolTip Effect Using jQuery

Posted in: jQuery No Comments

jquery_logo
What is tool tip:
Tooltip is a small popup box which opens when you mouse hover any element. This popup box gives some brief information about that element. Thus ToolTip improves user interface of the website.

In this tutorial I will show you how you can add ToolTip feature on your website using jQuery.

Step 1:
Create some links. Add an attribute desc to each link. Also give a class hover to each link.

<a href="#" class="hover" desc="Homepage">Home</a> / <a href="#" class="hover" desc="latest news">Blog</a>

Step 2:
Add an empty div reason with ID hovertitle
So, our HTML code will be something like this:

<div id="hovertitle"></div>
<a href="#" class="hover" desc="Homepage">Home</a> / <a href="#" class="hover" desc="latest news">Blog</a>

Step 3:
Add css for ID hovertitle

#hovertitle {
	display: none;
	position: absolute;
	font-size: 12px;
	padding: 7px;
	background: #ddd;
	color: #222;
	border: 1px solid #9e9e9e;
	border-radius: 2px;
}

Step 4:
Call jQuery library. I am using Google CDN hosted jQuery library.
You can use alternative method to include jQuery library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 5:
Following jQuery code will show value of attribute desc on mouse hover in div region #hovertitle

<script type="text/javascript">
$(document).ready(function() {
$(".hover").mousemove(function(e) {
var hovertext = $(this).attr("desc");
$("#hovertitle").text(hovertext).show();
$("#hovertitle").css('top', e.clientY+12).css('left', e.clientX+12);
}).mouseout(function() {
$("#hovertitle").hide();
});
});
</script>

Done!!
Check Demo and Download

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply