Как сделать всплывающие подсказки на сайте

В данной статье, хотелось бы вам рассказать, как сделать красивые всплывающие подсказки, которые дополнят ваш сайт и сделают его более интерактивным. Нам поможет библиотека, которая написана на jQuery — Tooltipster.  Это достаточно гибки и расширяемый плагин, который имеет совместимость с Mozilla Firefox, Google Chrome, IE6+ и многими другими.

ДЕМО

И так, разберем как работать с данной библиотекой

1. Загрузка jQuery и подключение файлов библиотеки Tooltipster

После того как вы скачали Tooltipster, вам нужно подключить jQuery а также CSS и JavaScript-файлы Tooltipster но своем сайте.

Примечание по совместимости: jQuery 1.7 достаточно, если вам нужна поддержка SVG в IE (затем используйте jQuery 1.10+). Tooltipster вообще не работает с jQuery 1.8 в IE9.

 

2. Напишите свой HTML-код.

 

Чтобы можно было определить элементы, которые получат всплывающую подсказку, мы присвоим им класс «tooltip». Вы можете использовать другое имя класса или даже другие средства выбора по вашему выбору. После этого мы укажем атрибут title и пропишем то,что мы хотим видеть как подсказку.

Вот несколько примеров:

Примечание: если вы используете Twitter Bootstrap, используйте другое имя класса, потому что «tooltip» может создать конфликт.

3. Инициализируйте плагин Tooltip

Теперь нам необходимо инициализировать Tooltipster. Чтобы сделать это, добавьте следующий скрипт прямо перед вашим закрывающим тегом </ head> (используя любой селектор, который вам нравится — в этом случае мы все еще используем класс «tooltip»):

 

4. Стилизировать подсказки

Помимо стиля по умолчанию, Tooltipster имеет 5 тем на выбор.

Чтобы использовать тему, просто включите ее файл css (расположенный в папке dist / css / plugins / tooltipster / sideTip / themes) на своей странице и укажите его имя в параметрах Tooltipster:

Более подробно про стилизирование Tooltipster можно почитать на оф. сайте плагина

 

5. Используйте HTML внутри своих подсказок

 

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

Вместо атрибута title используйте атрибут content-tooltip-content для предоставления селектора, который соответствует элементу HTML вашей страницы, который должен использоваться как контент.

Пример:

В вашем файле CSS добавьте .tooltip_templates {display: none; }, чтобы содержимое не отображалось вне подсказки.

Важно: если у вас есть две всплывающие подсказки, которые имеют один и тот же data-tooltip-content (то есть хотят, чтобы оба использовали один и тот же элемент HTML), установите для параметра contentCloning значение true, когда вы инициализируете свои всплывающие подсказки:

 

6. Используйте плагины

 

Возможности Tooltipster могут быть расширены с помощью плагинов. Они могут добавлять новые стили, новые параметры, новые методы, новое поведение и т.д.
Некоторые популярные плагины для Tooltipster:

SVG — поставляется с Tooltipster, добавляет поддержку SVG, не включен по умолчанию (см. Раздел SVG на оф.сайте)

Follower —  позволяет подсказке следовать за курсором. Посмотреть здесь

ScrollableTip — делает подсказку прокручиваемой, когда она становится слишком большой. Ознакомиться здесь

Discovery —  Создает группы всплывающих подсказок для более быстрого отображения. Посмотреть здесь и документация здесь

SelectableText — Создает всплывающую подсказку, когда вы выбираете / выделяете текст. Подробнее здесь

 

С полным списком опций можно ознакомиться на официальном сайте

Если у вас есть вопросы, пишите в комментарии, буду рад помочь.
Чтобы не пропустить выход новых статей, подписывайтесь на наш telegram-канал и соц.сети 😉

 

Оставьте ответ

comment-avatar

*