Отличный инструмент для быстрого создания всплывающих подсказок (tooltips) на сайте. Множество вариантов анимации, легкая настройка, понятная документация.
Tippy.js использует плагин всплывающих подсказок Propper.js, со своими особенностями. Вызывать подсказки можно несколькими способами:
- при наведении;
- при клике;
- с задержкой при наведении и клике.
Плагин дает грамотную обратную связь, чтобы Вы могли отследить действия пользователя и задать определенные условия.
Сразу хотелось бы привести сводные данные о браузерах, которые не поддерживаются плагином (в основном, это устаревшие версии обозревателей):
| Браузер | Год релиза | Доля пользователей в мире |
|---|---|---|
| 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% |
Если у Вас есть возможность обойти ограничения в использовании данных браузеров, то приступим к использованию плагина всплывающих подсказок.
Подключаем необходимые файлы:
|
1 2 |
<link rel="stylesheet" href="css/tippy.css"> <script src="js/tippy.js"></script> |
Создаем саму подсказку – атрибут title должен содержать Ваш текст, которые будет всплывать:
|
1 |
<button class="btn tippy" title="I'm a tooltip!">Text</button> |
Затем, чтобы наша подсказка заработала, необходимо создать новый экземпляр, передав в селекторе CSS:
|
1 |
new Tippy('.tippy') |
Или просто передать идентификатор:
|
1 |
new Tippy(document.querySelector('#myElement')) |
Проще и быть не может. Разумеется, это минимальные возможности плагина. Рекомендуем почитать документацию от автора плагина, чтобы применять другие опции, например:
|
1 2 3 4 5 6 |
new Tippy('.tippy', { position: 'right', animation: 'scale', duration: 1000, arrow: true }) |
Скачать файлы плагина Вы сможете по ссылке выше. Удачи!