Cacher is the code snippet organizer for pro developers

function simple_tooltip(target_items, name){
  $(target_items).each(function(i){
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
		var my_tooltip = $("#"+name+i);

		if($(this).attr("title") !== ""){ // checks if there is a title

			$(this).removeAttr("title").mouseover(function(){
				my_tooltip.css({opacity:0.9, display:"none"}).fadeIn(400);
			}).mousemove(function(kmouse){
				my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY-30});
			}).mouseout(function(){
				my_tooltip.fadeOut(400);
			});

		}
	});
}

$(document).ready(function(){
	simple_tooltip(".trigger","tooltip");
});

   <a href="#" class="trigger" rel="tooltip" title="This is a tooltip">Hover Me</a>

/* just for demo purposes, you don't need the body padding */
body{
  padding:50px;
}

.tooltip{
    position:absolute;
    z-index:999;
    left:-9999px;
    background-color:#F1F1F1;
    padding:5px;
    border:1px solid #fff;
    width:auto;
  font-weight:bold;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border:1px solid #E2E2E2;
}

.tooltip p{
    margin:0;
    padding:0;
    color:#333;
    padding:2px 7px;
}