(function($) {
	$.fn.tooltip = function(selector) {
		$('body').append('<div id="tooltip"><div class="content">Test</div></div>');
		var el_tooltip = $('#tooltip');
		var el_tooltip_content = $('#tooltip .content');
		var timeout;
		
		el_tooltip.hover(function(){
			// do not hide the tooltip
			clearTimeout(timeout);
		}, function(){
			// hide the tooltip
			// the timeout is necessary because the user could hover the tooltip and the link mouseleave would occure before the tooltip mouseenter
			timeout = setTimeout(function(){ el_tooltip.hide(); }, 1)
		});
		
		return this.each(function(){
			$(this)
				.delegate(selector, 'mouseenter', function(e){
					// do not hide the tooltip
					clearTimeout(timeout);
					
					// set data of tooltip and show it
					var el = $(this);
					el_tooltip_content.html( $(el.attr('data-tooltip')).html() );
					el_tooltip.show();
					
					// get offset of link and height of tooltip box
					var offset = el.offset();
					var top = offset.top-el_tooltip.outerHeight();
					
					// position the tooltip box
					el_tooltip.css( { left: e.pageX - 10, top: top } );
				})
				.delegate(selector, 'mouseleave', function(e){
					// hide the tooltip
					// the timeout is necessary because the user could hover the tooltip and the link mouseleave would occure before the tooltip mouseenter
					timeout = setTimeout(function(){ el_tooltip.hide(); }, 1)
				})
		});
	}
})(jQuery);