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

Роман Чернышов    JavaScript / jQuery     title jquery, всплывающие подсказки, подсказки jquery Комментариев 0 Дата 22 Фев

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

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

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

<script type="text/javascript" src="js/jquery-compressed.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script>

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

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

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

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

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

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

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

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

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

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

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

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

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