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

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

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

Оставить комментарий

Об авторе и блоге Чернышов Р.В. Сертификат. Топ 10% лучших фрилансеров, Чернышов Р.В.

Друзья, всем привет!

Меня зовут Роман Чернышов, я веб-разработчик и данный блог посвящен моим проектам и бизнесу.

Тут я делюсь личным опытом
и отвечаю на вопросы. Я всегда готов к сотрудничеству с вами, готов реализовать проект любой сложности(опыт 10+ лет).

Если у вас есть вопросы, предложения, вы хотите совершить покупку моих решений или заказать работу, пишите!



Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка