Как сделать всплывающую подсказку без title

Опубликовано: 25 Декабрь 2010Автор ratemir

Если подсказка содержит большое количество информации, чтобы показать её, Вам не придется громоздить атрибут title и «загрязнять» HTML код. Содержание будет определено в свой собственный элемент HTML. Форма подсказке придаётся с помощью CSS. Гибкое позиционирование контента. Простое и легкое решение. Этот jQuery плагин не пытается сделать всё для Вас, но своих целей, на мой взгляд, он достиг. О том, какие ещё бывают всплывающие подсказки можно узнать перейдя по ссылке.

Принцип работы

HTML разметка. Нам нужно два элемента, один целевой, на который пользователь наводит мышь и один для содержания подсказки. Обратите внимание на атрибуты идентификаторов(id). Они не должны быть одинаковыми.

<span id="example-target-1">Наведи курсор на меня</span>
<div id="example-content-1">Содержание подсказки</div>

Информация может храниться не только в контейнерах div, но для этих целей подходит любой другой html блок. Например мы можем легко использовать изображение в виде всплывающей подсказки, сделав что-то вроде этого:

<img id="example-content-1" width="276" height="110" src="http://site.ru/images/img.gif" alt="картинка"/>

Стили CSS. Внешний вид подсказке придаётся с помощью CSS. Если вы хотите добавить стрелки или закругленные углы, просто добавте соответствующее фоновое изображение в файл CSS (свойство background). Ниже указанные стили можете положить в основной файл .css Вашего сайта.

#example-content-1 {
	display: none;        /* required */
	position: absolute;   /* required */
	padding: 10px;
	border: 1px solid black;
	background: white;
}

Нам необходимо, скрыть содержание подсказки(display: none;) и дать ей абсолютную позицию (это может быть сделано автоматически в будущих версиях этого плагина). Здесь вы можете настроить внешний вид содержания, меняя фоновое изображение, границы, цвета, и т.д. ...

jQuery. Скачав последнюю версию плагина, на странице Вашего сайта укажите пути к файлам с расширением js между тегами <head>...</head>, следующим образом:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='jquery-tooltip/jquery.ezpz_tooltip.js'></script>

То есть мы подгружаем основную библиотеку jQuery с серверов гугла и прописываем путь к самому плагину. Далее нужно сделать привязку между целевым элементом и всплывающей подсказкой, активируя выше указанное с помощью скрипта, который тоже копируем в <head>:

<script type='text/javascript'>
  $(document).ready(function(){
  $("#example-target-1").ezpz_tooltip();
});
</script>

По идее, цель и содержание элементов связаны между собой с помощью ID атрибута. Принцип работы заключается в следующем: (имя) -target- (уникальный идентификатор) будет привязан к (имя) -content- (уникальный идентификатор). Но Вы можете изменить настройки используемые по умолчанию, придав подсказке личный идентификатор следующим образом:

<script type='text/javascript'>
  $(document).ready(function(){
  $("#target").ezpz_tooltip({contentId:"content"});
});
</script>

Соответственно html станет таким:

<div id="target">Hover over me</div>
<div id="content">I'm target's hover content</div>

Привязка нескольких подсказок

Как правило, страницы содержат многочисленное количество подсказок. Чтобы привязка между объектами работала как надо, HTML разметка должна быть такой:

<div class="tooltip-target" id="example-target-1">First Target</div>
<div class="tooltip-target" id="example-target-2">Second Target</div>
<div class="tooltip-target" id="example-target-3">Third Target</div>
 
<div class="tooltip-content" id="example-content-1">Content for first</div>
<div class="tooltip-content" id="example-content-2">Content for second</div>
<div class="tooltip-content" id="example-content-3">Content for third</div>

Чтобы связать все цели с соответствующим содержанием, достаточно этих строчек:

<script type='text/javascript'>
     $(document).ready(function(){
     $(".tooltip-target").ezpz_tooltip();
});
</script>

Связка нужных нам элементов при помощи вызова функции ezpz_tooltip () на класс tooltip-target, будет зависеть от принципа именования идентификаторов, который я описал выше.

Позиционирование всплывающего контента

Поменять место появления всплывающего окна можно следующим образом: Откройте файл jquery.ezpz_tooltip.js В конце Вы увидите конфигурационные данные похожие на эти:

$.fn.ezpz_tooltip.positions.topLeft = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
	contentInfo['top'] = 0;
	contentInfo['left'] = 0;
 
	return contentInfo;
};

Вставив эту запись вместе с похожими данными и сохранив файл, у Вас появляется возможность использования новой позиции на сайте. Обратите внимание на идентификатор «topLeft» , он должен быть уникальным. Активация строк осуществляется как обычно, прописав на странице сайта следующие строки:

<script type='text/javascript'>
  $(document).ready(function(){
       $("#tooltip-target-1").ezpz_tooltip({
	contentPosition: 'topLeft'
       });
   });
</script>

Благодаря этому примеру(topLeft) подсказка всплывёт в левом верхнем углу экрана монитора. Вероятно, Вам придется использовать параметры для собственных позиций, так что вот некоторые сведения о том как это сделать.

contentInfo['top'] и contentInfo['left'] могут принимать следующие значения:

mouseX : позиция мыши на оси координат Х.
mouseY : позиция на оси Y.
offset : Смещение всплывающей подсказки. По умолчанию 10px.

В файле jquery.ezpz_tooltip.js можно заметить похожие примеры функций позиционирования(в нижней части) и создать, наподобие, свою.

Параметры и их значения

contentPosition: Место, где будет появляться подсказка. Возможные значения: aboveFollow , rightFollow , belowRightFollow , belowFollow , aboveStatic , rightStatic , и belowStatic. Также, можно создать свою позицию, о чём рассказано выше.

stayOnContent: Установите true , если хотите, чтобы подсказка оставалась видимой, когда пользователь наводит курсор на неё. По умолчанию стоит false.

offset: Смещение всплывающего окна. По умолчанию 10.

contentId: "" . Пропишите здесь ID атрибут подсказки, если она не определяется обычным путем.

beforeShow : function (content){} . Укажите эту функцию, для того чтобы она совершила какое-то действие, прежде чем содержимое отобразилось. Как правило, здесь используется вызов AJAX для заполнения поля подсказки.

afterHide : function (){} . Укажите эту функцию, для совершения определённого действия, после того как содержание скрыто.

Вот пример работы всплывающей подсказки.
Скачать последнюю версию плагина.

Метки: Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

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

Наверх