$(document).ready(function() {
	$('.tooltip').tooltip();
});

$.fn.tooltip = function(optionen){
	
	optionen = $.extend({
		xOffset: -20,
		yOffset: 20
	}, optionen);

	$(this).hover(
		function (e) {
			this.t = $(this).attr('title');
			$(this).attr('title', '');
			
			$('body').append('<div id="tooltip">' + this.t + '</div>');
			
			$('#tooltip').css({
				padding: '10px',
				backgroundColor: '#ffc',
				border: '1px solid #aaa',
				borderRadius: '5px',
				boxShadow: '0 0 5px #aaa',
				position: 'absolute',
				zIndex: 999,
				top: (e.pageY + optionen.yOffset) + 'px',
				left: (e.pageX + optionen.xOffset) + 'px'
			}).fadeIn();			
		},
		function () {
			$(this).attr('title', this.t);
			$('#tooltip').remove();
		}
	);
	
	$(this).mousemove(function(e){
		$('#tooltip').css({
			top: (e.pageY - optionen.xOffset) + 'px',
			left: (e.pageX + optionen.yOffset) + 'px'
		});
	});	
}