$(document).ready(function() {

	//Select all anchor tag with rel set to tooltip
	$('a[rel=tooltip]').mouseover(function(e) {
		
		//Grab the title attribute's value and assign it to a variable
		var tip = $(this).attr('title');	
		
		//Remove the title attribute's to avoid the native tooltip from the browser
		$(this).attr('title','');
		
		//Append the tooltip template and its value
		$('body').append('<div id="tooltip">' + tip + '</div>');		
				
		//Show the tooltip with faceIn effect
		$('#tooltip').fadeIn('500');
		$('#tooltip').fadeTo('10',1);
		
	}).mousemove(function(e) {
	
		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
		$('#tooltip').css('top', e.pageY-300 );
		$('#tooltip').css('left', e.pageX-50 );
		
	}).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();
		
	});
		//Select all anchor tag with rel set to tooltip
	$('a[rel=tooltip2]').mouseover(function(e) {
		
		//Grab the title attribute's value and assign it to a variable
		var tip = $(this).attr('title');	
		
		//Remove the title attribute's to avoid the native tooltip from the browser
		$(this).attr('title','');
		
		//Append the tooltip template and its value
		$('body').append('<div id="tooltip2">' + tip + '</div>');		
				
		//Show the tooltip with faceIn effect
		$('#tooltip2').fadeIn('500');
		$('#tooltip2').fadeTo('10',1);
		
	}).mousemove(function(e) {
	
		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
		$('#tooltip2').css('top', e.pageY-330 );
		$('#tooltip2').css('left', e.pageX-150 );
		
	}).mouseout(function() {
	
		//Put back the title attribute's value
		$(this).attr('title',$('div#tooltip2').html());
	
		//Remove the appended tooltip template
		$('body').children('div#tooltip2').remove();
		
	});
	
	//Another type
		//Select all anchor tag with rel set to tooltip
	$('a[rel=tt]').mouseover(function(e) {
		
		//Grab the title attribute's value and assign it to a variable
		var tip = $(this).attr('title');	
		
		//Remove the title attribute's to avoid the native tooltip from the browser
		$(this).attr('title','');
		
		//Append the tooltip template and its value
		$('body').append('<div id="tt">' + tip + '</div>');		
				
		//Show the tooltip with faceIn effect
		$('#tt').fadeIn('500');
		$('#tt').fadeTo('10',1);
		
	}).mousemove(function(e) {
	
		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
		$('#tt').css('top', e.pageY-20 );
		$('#tt').css('left', e.pageX+20 );
		
	}).mouseout(function() {
	
		//Put back the title attribute's value
		$(this).attr('title',$('div#tt').html());
	
		//Remove the appended tooltip template
		$('body').children('div#tt').remove();
		
	});

});