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, яка містить живі зразки + фрагменти коду, які можна скопіювати та повторно використати..