Tooltipster: многофункциональный плагин для создания всплывающих подсказок

13 минут на чтение

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

Cтандартные всплывающие подсказки

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

Внешний вид подсказки зависит от операционной системы и не подлежит оформлению с помощью стилей.

Использование собственного атрибута

В данном варианте можно также обойтись без jQuery.  В HTML5 элементам можно назначать собственные атрибуты, для этого необходимо использовать префикс data-.

Создадим для ссылки псевдоэлемент after, который будет появляться при наведении на ссылку:

Далее для ссылки, в качестве эффекта при наведении, указываем появление псевдоэлемента after

Использование jQuery UI

Виджет Tooltips работает так же, как стандартная всплывающая подсказка, только его можно оформлять с помощью CSS. Для работы виджета необходимо подключить jQuery и библиотеку jQuery UI (плагин и стили).

Не забываем прописывать атрибут title.

Подключаем виджет к ссылке в JS

Вот так выглядит подсказка со стандартным стилем jqueru ui.

Можно изменить стиль передав параметр tooltipClass:

В стилях оформляем по своему усмотрению

Виджет имеет множество настроек, как внешнего вида, так и функционала, подробнее в документации.

Tooltipster

Отличный плагин для создания красивых и функциональных всплывающих подсказок.

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

Для работы требуется подключенный jQuery и сам плагин со стилями Tooltipster.

Создадим ссылку с атрибутом title

Вызовем метод  плагина для ссылки с классом my-link4

С настройками по умолчанию подсказка выглядит вот так

Методу можно передать параметры, например тему, анимацию, задержку, триггер для срабатывания и многое другое

See the Pen wov_181123 by Paul (@1110000) on CodePen.

Остальные настройки рассмотрим в примерах

Пример #1

Всплывающая подсказка с интерактивной подсказкой, содержащей варианты заполнения поля input

Как уже упоминалось ранее, Tooltipster позволяет выводить HTML-content в подсказке. Создадим начальную разметку с полем Input.

Также добавим шаблон: контейнер с содержимым подсказки:

Отключим в стилях отображение шаблона на странице

Подключим плагин к полю вывода с классом .tooltip, в качестве содержимого подсказки в свойстве content указываем объект элемента #tooltip_content

Напишем функцию обработки surname() события клика по кнопке подсказки. Не забываем указывать атрибут onclick в теге кнопки, в качестве параметра передаем объект элемента по которому кликнули onclick=”surname(this).

Присваиваем элементу input с классом tooltip, содержимое нажатой кнопки.

Поскольку при включенной опции интерактивности (interactive:true) событие onclick, произошедшее в пределах контейнера подсказки (клик по кнопке в нашем случае), не является триггером для закрытия подсказки, т.е. подсказка не исчезнет после нажатия на кнопку, поэтому закрываем подсказку с помощью метода ‘close’, который после окончания анимации удаляет элемент подсказки из дерева.

 

See the Pen wov_181123+ by Paul (@1110000) on CodePen.

 

Facebook Vk Ok Twitter Telegram

Похожие записи:

Часто встречающаяся задача создания пользовательского интерфейса с возможностью сортировки элементов. Для наглядного представления сортируемых элементов больше всего подходят списки или таблицы. В данной статье рассмотрим как организовать сортировку элементов ...
С учетом возрастания количества, а в некоторых случаях преобладания, на сайтах посетителей, заходящих с мобильных устройств, адаптивное меню становится обязательной составляющей сайта. Bootstrap 4 включает отличный инструмент для создания  адаптивного меню – к...
Здравствуйте, после создания сайта ему обязательно нужен счетчик, который считывает заходы ваших посетителей на сайт. Это очень важно! Ведь с помощью статистики Вы сможете выявлять проблемы вашего сайта, анализировать статистику. Есть много разных счетчиков по...