Simple Jquery Tooltip

Tooltips is always a essential part in website to show addtional text.so here is the simple tutorial of making tooltips with jquery

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<span title="This is a tool tip text" class="popup-text">Mouse Over to see Tool Tip</span>

CSS

#pop-text
{
	position:absolute;
	padding:5px;
	background:#33CCFF;
	visibility:hidden;
	opacity:0;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}

JavaScript

$(document).ready(function(e) {
		var $pos_left;
		var $pos_top;
		var $h;
		var $top_;
		var $left_;
		var $pop_text;
		$('body').append("<div id='pop-text'></div>");
		$('.popup-text').hover(function(){
				 $pos_left=$(this).offset().left;
				 $pos_top=$(this).offset().top;
				 $h=$(this).height();
				 $top_=$pos_top-(parseInt($('#pop-text').css('padding-top'))+parseInt($('#pop-text').css('padding-bottom'))+$(this).height()+5);
				 $left_=$pos_left-50;
				 $pop_text=$(this).attr('title');
				$('#pop-text').html("<span>"+$pop_text+"</span>");
				$('#pop-text').css({"left":$left_,"top":$top_,"visibility":"visible"});
				$('#pop-text').stop(true,true).animate({"left":$pos_left,"opacity":"1"},300);
				if($('#pop-text').height() > $pos_top)
				{
					$top_=$pos_top+(parseInt($('#pop-text').css('padding-top'))+parseInt($('#pop-text').css('padding-bottom'))+$(this).height());
					$('#pop-text').css({"left":$left_,"top":$top_,"visibility":"visible"});
				}
			},function(){
					$('#pop-text').stop(true,true).animate({"left":$left_,"opacity":"0"},300);
				});
        //var $a=$('.popup-text').offset().left;
		//alert($a);
    });