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, която включва живи образци + кодови фрагменти, които можете да копирате и използвате повторно.