
$.fn.hint = function (settings) {
	settings = jQuery.extend({
		element : null,
		offsetX : 0,
		offsetY : 0
	}, settings);

	this.each(function(){		
		if ($(this).attr('title') != ''  || $(this).find("em").lenght > 0) {
			$(this).css("position","relative");
			$(this).append(
		'<div class="collout_question" style="display:none; position:absolute;">'
		+'<table width=200px cellspacing="0">'
			+'<tbody>'
				+'<tr>'
					+'<td class="coll_question_11"></td>'
					+'<td class="coll_question_12"></td>'
					+'<td class="coll_question_13"></td>'
				+'</tr>'
				+'<tr>'
					+'<td class="coll_question_21"></td>'
					+'<td class="coll_question_22">'
						+'<div class="ttt"></div>'
					+'</td>'
					+'<td class="coll_question_23"></td>'
				+'</tr>'
				+'<tr>'
					+'<td class="coll_question_31"></td>'
					+'<td class="coll_question_32"></td>'
					+'<td class="coll_question_33"></td>'
				+'</tr>'
				+'</tbody>'
			+'</table>'
	+'</div>');

			var pos = {left:0, top:0};	
			$(this).hover(
				function() {								
					var left = pos.left + settings.offsetX - $(this).find(".collout_question").width() + 5 + $(this).width();
					$(this).find(".collout_question").css("z-index",1000);
					$(this).find(".collout_question").show();

					var hoverText = $(this).attr("title");
					if (hoverText) {
						$(this).find(".collout_question .ttt").html(hoverText);
						$(this).attr("title","");						
					}
									
					var top = pos.top - $(this).find(".collout_question").height() + settings.offsetY;	
					$(this).find(".collout_question").css({left:left+"px", top: top+"px"});
										
				}, function() {
					//$(this).find(".collout_question").animate({opacity: "hide"}, "fast");
					$(this).find(".collout_question").hide();
				}
			);
		}
		
	});
	return this;
}
