Красивые всплывающие подсказки Jquery Css

В этом уроке мы будем делать красивые всплывающие подскаски, как в Google Analytics, с помощью JQUERY и CSS

Наверное многие из вас , у кого имеется блог или сайт, не раз видели красивые всплывающие

подсказки проверяя, анализируя посещаемость своего сайта или блога, а кто не видел

выглядят они вот так

Сейчас мы попробуем селать что то похожое на то что показано на картинке

Начнем

1. Создаем Html документ

2. Подключаем к нему любую версию Jquery желательно одну из последних скачать вы их сможете здесь.

3. Далее пишем вот такой вот скрипт и вставляем его в документ

$(document).ready(function(){  //скрипт выполняется приготовности всех DOM элементов

$('[rel=tooltip]').bind('mouseover', function(){ //для всех элементов у которых rel равен tootltip при наведениии курсора выполняется функция 

var theMessage = $(this).attr('content');// переменной themessage приравниваем значения поля content
$('
' + theMessage + '

').appendTo('body').fadeIn('fast');//themessage выводим между тегами div с классом tootltip
$(this).bind('mousemove', function(e){ //функция определяет положение мыши и переносит за ним подскаску
			$('div.tooltip').css({
				'top': e.pageY - ($('div.tooltip').height())-10,
				'left': e.pageX + 25
			});
		});
	}).bind('mouseout', function(){ //функция убирает подсказку если мышка не на объекте
		$('div.tooltip').fadeOut('fast', function(){
			$(this).remove();
		});
	});
   });

Я его вставил в документ между тегами body, вы же можете сохранить его в отдельном файле и подключить в heder’е

4. Также нам нужно создать стили оформления всплывающих подсказок, делается это на Css вот собственно

код его тоже нужно будет подключить к документу

.tooltip{
	position:absolute;
	width:250px;
	background-image:url(tip-bg.png);
	background-position:left center;
	color:#333333;
	padding:5px 5px 5px 8px;
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-color: #FFFFFF;
	border-style: solid;
	border-width: 3;
	border-color: #666666;
}
.tooltip-image{
	float:left;
	margin-right:5px;
	margin-bottom:5px;
	margin-top:3px;
}
.tooltip span{
   font-weight:700;
   color:#0066FF;
}

5. Создаем пару элемнтов rel=”tooltip”, а в content прописываем текст всплывающей подсказки например вот так:

Любой текст

Текст элемента span
Текст элемента div

A вот и демо

У кого возникли вопросы задаем их в комментариях, Отвечу.