Tippy.js - легковесная библиотека подсказок по JavaScript

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

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

Плагин Tippy лучше всего работает для последней группы кто хочет работать с ванильным кодом JS.

С Tippy.js вы получаете полнофункциональная библиотека подсказок работает поверх Popper.js. Это означает, что плагин имеет небольшую зависимость, но управлять им намного проще, чем библиотекой jQuery..

Так в чем же прелесть Типпи? Он добавляет к стандартным стилям Popper для создания более динамичные подсказки с невероятными эффектами.

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

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

Он также поддерживает сенсорные устройства, что делает его идеальным для адаптивных макетов. HTML-код подсказки помечен с использованием стандартов ARIA для максимальной доступности. Я не могу придумать ничего плохого, чтобы сказать об этом плагине!

Если вы хотите попробовать это на своем собственном сайте, просто загрузите копию исходного кода с GitHub. Это включает в себя основные файлы плагинов вместе с подробной информацией о том, как установить его с помощью npm.

Файл скрипта Tippy.js по умолчанию поставляется с включенным Popper.js, поэтому вам даже не нужно загружать эту дополнительную библиотеку. Все, что вам нужно, это файл JS / CSS по умолчанию и веб-страница для запуска всплывающих подсказок..

Если вы хотите углубиться в некоторые примеры, взгляните на домашнюю страницу Tippy.js, которая включает в себя живые примеры + фрагменты кода, которые вы можете скопировать и использовать повторно..