jqueryexample.com jquery simple tooltip - jqueryexample.com

jquery simple tooltip by jqueryuser

Tooltips are very importa in website design. In mouse hover out the extra information show hide without hampering basic design or the main information.

This is one simple and best tooltip jquery code.  The script takes  title attribute of an A tag and place it a paragraph tag . Using css we can make then better look.

JQuery:
function tooltips(){	

xOffset = 10;
yOffset = 30;			

$("a.tooltip").hover(function(e){											  
var tipTitle = this.title;
this.title = "";									  
$("body").append("<p id='tooltip'>"+ tipTitle +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");		
},
function(){
this.title = tipTitle;		
$("#tooltip").remove();
});	
$("a.tooltip").mousemove(function(e){
$("#tooltip")
	.css("top",(e.pageY - xOffset) + "px")
	.css("left",(e.pageX + yOffset) + "px");
});			
};

$(document).ready(function(){
	tooltips();
});

//

CSS:
#tooltip{

	position:absolute;

	border:1px solid #333;

	background:#f7f5d1;

	padding:2px 5px;

	color:#333;

	display:none;

	}
Did you like this? Share it:

Discussion

  1. Hentai Adevy says:

    Nice post..

Leave a Comment