Всплывающие подсказки на jQuery. Создаём всплывающие подсказки при наведении на jQuery

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

В этом уроке, мы рассмотрим способ создания всплывающей подсказки на jQuery. Все это можно сделать, поместив описание рядом с объектом, но для этого не всегда хватает свободного места, да и структура сайта может усложнить подобную реализацию. Здесь нам здорово помогут всплывающие подсказки. Их можно реализовать стандартным атрибутом title. Но можно попробовать создать и собственные всплывающие подсказки на jQuery, которые не будут ограничены стандартным стилевым оформлением атрибута title, предложенным тем или иным браузером.

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

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

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

Также необходимо учесть, что изначально блок для подсказки должен быть скрыт. При наведении на объект — его нужно показать, а при уходе из области объекта — вновь скрыть. Итак, мы обрисовали пространно наш алгоритм. Теперь давайте систематизируем это:

Алгоритм готов, приступим к реализации.

Для начала создадим 2 объекта, с которыми будем работать — ссылку и картинку. Также в любом месте кода добавим блок для подсказки:

В блок для подсказки с идентификатором hint мы поместили набор любых символов, чтобы блок был виден:

Ссылкам мы добавили атрибут rel, в который и помещены подсказки. Также каждой ссылке мы дали класс hover, чтобы можно было работать с объектами при помощи jQuery. Сейчас блок подсказки виден и находится в общем потоке элементов. Давайте для начала спозиционируем его абсолютно и пока что вручную зададим ему координаты. Для этого добавим стилевое правило для идентификатора hint:

После этого мы получим следующую картину:

Теперь, согласно алгоритму, считаем подсказку объекта, по которому движется мышь. Но прежде — получим координаты указателя мыши. В этом нам поможет событие mousemove(). Данное событие происходит тогда, когда указатель мыши двигается над областью элемента. Обработчику события передается одна переменная — объект события. В свойствах этого объекта — clientX, clientY — и находятся координаты указателя.

Получим координаты и выведем их в блок подсказки (не забудьте убрать текст, который в блоке мы писали изначально):

Теперь при движении по элементу происходит считывание координат указателя мыши относительно окна браузера и эти координаты (X и Y) меняются в блоке hint.

Отлично! Координаты у нас есть, следовательно — можно позиционировать блок hint. Добавим немного стилей блоку (также уберем атрибуты top и left из стилей):

Теперь блок скрыт. Его мы будем открывать по событию mousemove(). В функции по событию mousemove() получим значение атрибута rel элемента, на котором произошло само событие:

Укажем координаты блока hint, воспользовавшись методом css():

Здесь мы также к имеющимся координатам добавили по 10 пикселей. Сделано это для того, чтобы блок hint имел небольшой отступ от курсора мыши.

Ну и, наконец, добавим текст подсказки в блок и покажем сам блок:

В итоге мы получили пользовательскую всплывающую подсказку:

Осталось скрыть блок hint после того, как указатель уходит с объкта. Здесь воспользуемся событием mouseout() и методом hide():

Вот, собственно, и все. Теперь блок с подсказкой показывается при движении курсора мыши по объекту и скрывается, когда указатель покидает область объекта.

Также можно попробовать задать пользовательский атрибут элементам и работать с ним. Например, дадим элементам атрибут ht:

Соответственно, в коде jQuery будем работать уже с данным атрибутом:

Мы реализовали поставленную задачу, создали всплывающую подсказку на jQuery, на этом урок можно заканчивать. Далее все зависит лишь от Вас и ограничено лишь Вашей фантазией. Можно стилизовать блок подсказки как угодно — добавить фоновое изображение, тень, изменить шрифт и т.д. В итоге можно получить симпатичную подсказку, которую можно применить к любому элементу сайта, добавив таким образом своеобразную изюминку.

Удачи Вам и до новых встреч!

Комментарии Вконтакте:

Комментарии (12)