drifterz28
1/11/2013 - 10:21 PM

simple little tool tip function

simple little tool tip function

function tool_tip(){
	var styles = '#tooltip {position:absolute;min-height:1px;padding:5px 0;}';
		styles += '#tooltiparrow {border-color: transparent transparent #efefef;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-14px;margin-left:-10px;left:50%;}';
		styles += '#tooltip p {text-shadow: 0 1px 0 #FFFFFF;margin: 0;background:#efefef; border: 1px solid #e4e4e4;border-radius: 5px; padding:3px 4px 2px; font-size: 0.8em; color:#303030;box-shadow:0 2px 2px -2px #303030;}';
	$('head').append('<style>'+styles+'</style>');
	$('body').find('[data-tool-tip]').hover(function(e){
		var titles = $(this).attr('data-tool-tip');
		var elem_width = $(this).width() / 2;
		var yax = $(this).offset().top + $(this).height() + 15;
		var xax = $(this).offset().left + elem_width;
		$('#tooltip').remove();
		$('body').append('<div id="tooltip"><div id="tooltiparrow"></div><p>'+titles+'</p></div>');
		$('#tooltip').css({'top':yax , 'left':xax - $('#tooltip').width() / 2}).fadeIn();
	},function(){
		$('#tooltip').fadeOut('slow', function(){
			$(this).remove();
		});
	});
}