(function($) {
	$.fn.tooltip = function(options) {
		var opts = $.extend( {}, $.fn.tooltip.defaults, options), tp = "#tooltip-overlay", titles = '';
		
		$("body")
				.append(
						'<div id="tooltip-overlay" style="display:none; position:absolute; text-align:center; width:auto;"></div>');

		$(this)
			.mouseover(
				function() {
					$('.tooltip-body',this).show();
					titles = $('.tooltip-body',this);
					$(tp).html(titles);
					$('.tooltip-body',this).html('');
					$(tp)
									.attr('style',
									'display:none; position:absolute; text-align:center; width:auto;z-index:9999');
					$(tp).css(opts.styles);
					$(tp).show().fadeTo("fast", 50);
				}).mousemove(function(e) {
					$(tp).css( {
						top : e.pageY + 22,
						left : e.pageX + 10
					});
				}).mouseout(function() {
					$(tp).hide();
					$(this).append(titles);
					$('.tooltip-body',this).hide();
				}).click(function() {
					$(tp).hide();
					$(this).append(titles);
					$('.tooltip-body',this).hide();
				});
	}

	$.fn.tooltip.defaults = {
		zindex : 100000,
		styles : {}
	}

})(jQuery);