плагин всплывающих подсказок

Tippy.js — современный плагин всплывающих подсказок с крутой анимацией

Отличный инструмент для быстрого создания всплывающих подсказок (tooltips) на сайте. Множество вариантов анимации, легкая настройка, понятная документация.

Tippy.js использует плагин всплывающих подсказок Propper.js, со своими особенностями. Вызывать подсказки можно несколькими способами:

  1. при наведении;
  2. при клике;
  3. с задержкой при наведении и клике.

Плагин дает грамотную обратную связь, чтобы Вы могли отследить действия пользователя и задать определенные условия.

Сразу хотелось бы привести сводные данные о браузерах, которые не поддерживаются плагином (в основном, это устаревшие версии обозревателей):

Браузер Год релиза Доля пользователей в мире
IE <= 9 2011 0.6%
Opera Mini 2015 3%
Firefox <= 15 2012 0.1%
Safari <= 5.1 2011 0.1%
Opera <= 12.1 2011 0.1%

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

Подключаем необходимые файлы:

Создаем саму подсказку – атрибут title должен содержать Ваш текст, которые будет всплывать:

Затем, чтобы наша подсказка заработала, необходимо создать новый экземпляр, передав в селекторе CSS:

Или просто передать идентификатор:

Проще и быть не может. Разумеется, это минимальные возможности плагина. Рекомендуем почитать документацию от автора плагина, чтобы применять другие опции, например:

Скачать файлы плагина Вы сможете по ссылке выше. Удачи!

639 просмотров
В поисках шаблона для сайта?