Всплывающие подсказки с помощью jQuery

Сегодня речь пойдет о JavaScript библиотеке, которая предназначена для создания всплывающих подсказок на web странице. Называется она Tooltip и представляет собой плагин для библиотеки jQuery.

Раньше я писал об аналогичном плагине для библиотеки Prototype.

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

Рассмотрим несколько примеров.

Для того чтобы использовать плагин, нужно в заголовке страницы подключить библиотеку jQuery, плагин Dimensions и сам Tooltip.

Например:

<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>

Примечание. Все необходимые файлы находятся в архиве с библиотекой.

Теперь можно создавать подсказки.

Самый простой вариант:

$('#element_id').tooltip();

По-умолчанию, текст подсказки будет взят из атрибута title элемента, для которого она создается. При этом к нему будет добавлено значение атрибутов href или src, т.е. ссылка.

Естественно, в большинстве случаев ссылка только портит вид подсказки (особенно, если она длинная). Поэтому предусмотрена возможность ее удаления:

$('#element_id').tooltip({showURL: false});

Как видите, в первом параметре функции tooltip в фигурных скобках можно указать настройки отображения подсказок.

Рассмотрим еще несколько примеров.

$('#element_id').tooltip({delay: 0});

Убираем задержку перед появлением подсказки.

$('#element_id').tooltip({track: true});

Заставляет подсказку двигаться за указателем мыши.

$('#element_id').tooltip({top: -20, left: -30});

Эти два параметра задают смещение подсказки относительно указателя мыши.

Но самой полезной опцией, на мой взгляд, является возможность использовать текст любого блока на странице в качестве подсказки.

Прежде всего, создаем этот блок.

<div id="myTip" class="hide">Здесь может находиться <strong>текст</strong> с произвольной разметкой</div>

В данном случае он содержит обычную строку, в которой слово текст выделено жирным шрифтом.

Теперь создаем CSS правило, которое спрячет этот блок:

.hide {
	display: none;
}

И, наконец, создаем подсказку:

$("#elementWithTip").tooltip({
	bodyHandler: function(){
		return $("#myTip")[0].innerHTML;
	},
	showURL: false
});

Разберем этот фрагмент кода.

Функцию tooltip мы вызываем для элемента, к которому нужно добавить подсказку (в данном примере этот элемент имеет id="elementWithTip").

Первая опция называется bodyHandler. Она позволяет задать любой произвольный текст подсказки. В качестве значения мы передаем ей результат выполнения анонимной функции (строки 2-4). Эта функция просто возвращает содержимое блока myTip.

О второй опции я уже писал. Она удаляет ссылку из подсказки.

Оформление подсказок.

При желании можно изменить дизайн подсказки до неузнаваемости 🙂 . В смысле так чтобы она идеально подходила к оформлению вашей страницы.

Все, что нужно – это создать необходимые стили (CSS).

Разметка подсказки имеет вид:

<div id="tooltip" style="display: none; left: ...px; right: auto; top: ...px;" class="">
	<h3 style="display: none;"/>
	<div class="body">Текст подсказки.</div>
	<div class="url" style="display: none;"/>
</div>

Как видите, блок с подсказкой имеет id="tooltip" и атрибут style. Сразу обратите внимание на правило display:none. Это правило библиотека добавляет, когда подсказка не видна.

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

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
	font-size: 0.8em;
}

#tooltip h3, #tooltip div { margin: 0; }

Обязательными здесь являются правила position и z-index.

Переходим к тексту подсказки. Для его размещения предусмотрены 3 блока.

1) Тег h3 – заголовок подсказки. Создается автоматически, если задана опция showBody. Её значением должен быть разделитель между заголовком и основным текстом.
Например: showBody: " - ". В этом случае если текст подсказки записан так: «Заголовок – Основной текст», то слово «Заголовок» будет находиться внутри тега h3, а фраза «Основной текст» — внутри <div class="body">.

2) div class="body" — блок основной части текста подсказки.

3) div class="url" – блок для ссылки (если она есть).

Думаю, принцип ясен. Используя таблицы стилей (CSS) можно легко изменить дизайн подсказки.

Как видите, библиотека достаточно удобная. От вас требуется минимум работы: написать текст подсказок, «привязать» подсказки к элементам web страницы и оформить их (при необходимости).

Полный перечень опций библиотеки находится здесь.

Если есть вопросы – пишите в комментариях.

До встречи!