$(document).ready(function() {


	$('a[rel=tooltip]').mouseover(function(event) { 

		var tiptext = $(this).attr('title');

		$(this).attr('title','');

		$('body').append('<div id="tooltip"><p>' + tiptext + '</p></div>');

		$('div#tooltip').css('top', event.pageY + 10 );  
        $('div#tooltip').css('left', event.pageX + 20 );  
		
		
		 $('div#tooltip').fadeIn('500');  
         /*$('#tooltip').fadeTo('10',0.8);*/
		 

	}).mousemove(function(event) {  
       
         //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse  
         $('div#tooltip').css('top', event.pageY + 10 );  
         $('div#tooltip').css('left', event.pageX + 20 );  
           
    }).mouseout(function() {  
       
         //Put back the title attribute's value  
         $(this).attr('title', $('div#tooltip').html());  
       
         //Remove the appended tooltip template  
         $('body').children('div#tooltip').remove(); 
		
           
     }).click(function(event) {

		 event.preventDefault();
	 });  

});