Всплывающие подсказки на jquery

Автор: Роман Чернышов Опубликовано: 22 февраля 2011

Рано или поздно любой веб-мастер начинает задумываться о юзабилити своего сайта. Хочется с делать свой мега сайт или простой блог как можно привлекательнее и удобнее для пользователя. Существует множество различных фишек применяемых для улучшения «юзабельности» сайта, одной из таких является создание на сайте всплывающих подсказок, можно ограничится простыми подсказками прописанных в параметре title, а можно обратиться к удобной библиотеке jQuery и реализовать собственные.

Наиболее самой и часто используемой библиотекой для создания спец. эффектов для подсказок является jQuery Tooltip Plugin.

И так вставляем в шапку HTML документа, примерно следующий код:

Просмотр кода PHP

&lt;script type="text/javascript" src="js/jquery-compressed.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.dimensions.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.tooltip.min.js"&gt;&lt;/script&gt;

далее для создания подсказки на странице, просто прописываем одну команду

Просмотр кода PHP

&lt;script type="text/javascript"&gt
$('#element_id').tooltip();
&lt;/script&gt;;

#element_id — Идентификатор блока, для которого мы делаем подсказку. Текс подсказки будет взят автоматически из параметра title.

Хочу заметить, что если подсказка создается для ссылки или изображение к тексту подсказки добавится значение из параметра SRC или HREF, чтобы этого не происходило следует создавать подсказку с соответствующим параметром:

Просмотр кода PHP

&lt;script type="text/javascript"&gt;
$('#element_id').tooltip({showURL: false});
&lt;/script&gt;

Еще несколько способов создание подсказок с различными эффектами.

Показ без задержки во времени, или же наоборот медленное плавное открытие

Просмотр кода PHP

&lt;script type="text/javascript"&gt;
$('#element_id').tooltip({delay: 0});
&lt;/script&gt;

Живая подсказка, будет двигаться за курсором мышки, в области обьекта для которого была заданна подсказка:

Просмотр кода PHP

&lt;script type="text/javascript"&gt;
$('#element_id').tooltip({track: true});
&lt;/script&gt;

Можно задать смещение подсказки относительно курсора мышки:

Просмотр кода PHP

&lt;script type="text/javascript"&gt;
$('#element_id').tooltip({top: -20, left: -30});
&lt;/script&gt;

Более подробную информацию по этому плагину можно найти на сайте разработчика, так же примеры с использованием разных настроек и дополнительных эффектов. перейдя по данной ссылке.