jQuery(function($){
    $('body').append("<div id='helpful_hint_container' style='display:none;'><div id='helpful_hint_content'></div></div>");   
	$('.show_helpful_hint').focus(
		function () {
			help_message = $(this).attr('title');
			$(this).attr('hint',help_message);
			$(this).attr('title','');
			$('#helpful_hint_content').html(help_message);
			if ($('#helpful_hint_content').html() == '') return false;
			offset = $(this).offset()
			width = $(this).width()
			topEdge = offset.top - 15 + 'px';
			rightEdge = offset.left + width + 'px';
			$('#helpful_hint_container').css('top', topEdge);
			$('#helpful_hint_container').css('left', rightEdge);
			$('#helpful_hint_container').css('display', '');
		}
	);
	$('.show_helpful_hint').blur(
		function () {
		    help_message = $(this).attr('hint');
		    $(this).attr('title',help_message);
			$('#helpful_hint_container').css('display', 'none');
		}
	);
	
	$('.show_helpful_hint_hover').hover(
		function () {
			help_message = $(this).attr('title');
			$(this).attr('hint',help_message);
			$(this).attr('title','');
			$('#helpful_hint_content').html(help_message);
			if ($('#helpful_hint_content').html() == '') return false;
			offset = $(this).offset()
			width = $(this).width()
			topEdge = offset.top - 15 + 'px';
			rightEdge = offset.left + width - 15 + 'px';
			$('#helpful_hint_container').css('top', topEdge);
			$('#helpful_hint_container').css('left', rightEdge);
			$('#helpful_hint_container').css('display', '');
		},
		function () {
    		help_message = $(this).attr('hint');
		    $(this).attr('title',help_message);
			$('#helpful_hint_container').css('display', 'none');
		}
	);
	
	
	
});