Подсказка с помощью jQuery

by Andrey Dobrovoi

HTML

<a href="#"  rel="tooltip" content="<span>Подсказка jQuery</span><br/> Вы смотрите пример простой подсказки с помощью jQuery, такие подсказки работают одинакого хорошо во всех браузерах и могут применятся к различным элементам веб-сайтов">Просто наведите на ссылку</a>

CSS

.tooltip{
	position:absolute;
	width:250px;
	background-position:left center;
	background: lightslategray;
	color:#FFF;
	padding:5px 5px 5px 18px;
	font-size:11px;
	font-family:Verdana;                
	border: 2px solid lightgray;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
}

.tooltip span{
	font-weight:12px;
	color:#ffea00;                
}

JavaScript

$(function(){

	$('[rel=tooltip]').bind('mouseover', function(){
		
		var tip_content = $(this).attr('content');
		
		$('<div class="tooltip">' + tip_content + '</div>').appendTo('body');

		$(this).bind('mousemove', function(e){
			$('div.tooltip').css({
				'top': e.pageY - ($('div.tooltip').height() / 2) +45,
				'left': e.pageX + 15
			});
		});
		
	}).bind('mouseout', function(){
		
		$('div.tooltip').slideUp('fast', function(){
			$(this).remove();
		});
		
	});

})