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

27-02-2010

В этом уроке мы будем делать красивые всплывающие подскаски, как в 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 вот и демо

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

gwer3.18.2010 08:03
Все ясно и понятно, спасибо, взял на заметку. Только по поводу демо-версии: надо кодировку задать в документах, а то ведь оценить и осмыслить все со знаками вопросов/крякозябрами обычно сложно.
admin3.18.2010 08:03
знаю, знаю извините постоянно забываю...
JustSmile3.28.2010 02:03
Простите меня, чайника)) А вот у вас написано: "2. Подключаем к нему любую версию Jquery желательно одну из последних скачать вы их сможете здесь." Как подключить?)))
JustSmile3.28.2010 03:03
Кому:JustSmile,   О, вроде бы дошло, спасибо!
Mak4.16.2010 05:04
Да! Классная вещь! Наконец-то нашёл то, что нужно!
serg5.5.2010 05:05
вставил в header. библиотеки залил и в корень и папку с темой блога - не подключается (((
admin5.5.2010 03:05
Кому:serg,  в демо хорошенько посмотри, может ты пути не правильно прописал или еще че нить...
Andrey6.4.2010 09:06
Поставил эти подсказки на jcarousel. Огромнейшее спасибо!!!
Xpp2.14.2011 01:02
JustSmile как подключить Подсказка хорошая, но вот только появляются полосы прокрутки (если подсказка близко к краю находится) :( Как пофиксить?
Master2.14.2011 11:02
ADMIN! Замените наконец-то кодировку, пора проснуться!!!
    admin2.14.2011 03:02
    вот вы меня зачморили)), поправил.. спасибо за замечание)
Kevin2.21.2011 06:02
Вставил код на страницу, хотел сделать меню с подсказками ( меню в дивах). Пытался применить с rel="tooltip" как для дива, span, a - не работает нихера. jQuery подключен, скрипт в head.
Александр3.14.2011 08:03
Во избежание вопросов подключения (обычно у новичков они часто возникают) пользуйтесь гугловскими линками
Александр3.14.2011 08:03
ссылка почемуто не вставилась, но я думаю Admin поправит если что
Игорь4.1.2011 07:04
а как можно сделать чтобы эта подсказка выпадала а не двигалась за курсором?
    admin4.1.2011 08:04
    нужно убрать событие mousemove для элементов...
Dallas MD9.7.2011 05:09
Всё конечно хорошо, и даже работает... но только в отдельности от модуля раздвигающихся меню (ненравица использовани в ём |prototype|) Кто сталкивался? как лечить?
sv9t4.29.2012 06:04
А как ты сделал подсказки к популярным сообщениям?
ОСТАВИТЬ КОММЕНТАРИЙ