jquery simple tooltip

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;
	}
Share this nice post:

2 thoughts on “jquery simple tooltip

  1. Thanks for your your content – really interesting. We love our Kindle and the best site for tips and tricks is coolkindles.

Comments are closed.