40+ Корисні підказки Скрипти з CSS, JavaScript і jQuery

Цікавий елемент інтерфейсу, підказки (також звані infotips) роблять невелике вікно з'являється, коли курсор миші знаходиться над певним текстом або зображенням з інформацією що стосується елемента, що лежить над ним. З точки зору користувацького досвіду, підказки надають користувачам найшвидший та найпростіший джерело інформації не натискаючи нічого.

Хоча найпростішим способом додати підказки до тексту, є використання тега HTML або TITLE =””, ALT =””. Тим не менш, є деякі дійсно здорово підказки конструкцій і стилів, які можна створювати за допомогою JavaScript і CSS за допомогою скриптів підказки. Давайте подивимося.

CSS

Balloon.css - Повітряна куля є бібліотекою CSS складається з SasS і LESS , щоб показати інтерактивну підказку. Зміст і позиція підказки можна налаштувати за допомогою даних- атрибут. Ви можете показати підказку ліворуч, праворуч або вліво-вправо. Можна навіть додайте Emojis до вмісту. Balloon.css може бути встановлений через NPM і завантажений з CDNJS.

Simptip - Зроблено з SasS, що дозволяє повторно налаштувати та перекомпілювати код відповідно до вимог. Положення та вміст підказки можна налаштувати за допомогою імені класу та назви підказку даних атрибут. Simptip доступний як Пакет NPM, Пряжа та Бауер.

Hint.css - Одна з популярних бібліотек CSS для відображення підказки, Hint.css використовується багатьма популярними веб-сайтами, такими як Fiverr, Webflow та Tridiv. На відміну від двох інших бібліотек CSS, Hint.css використовує етикетці арії Ви можете налаштувати розмір і колір за допомогою імен класів з використанням методології БЕМ. Hint.css доступний на NPM, Bower і CDNJS.

Microtip - Ще одна чудова бібліотека CSS для створення підказки, побудованої за допомогою “Доступність” на увазі, Microtip використання етикетці арії для зберігання вмісту підказки та даних- атрибут для налаштування розміру та позиції підказки.

Він використовує змінну CSS, яка дозволяє налаштовувати підказку лише звичайним файлом CSS. Змінні CSS вже підтримуються багатьма веб-переглядачами та веб-переглядачами. Microtip доступний як NPM, пакет пряжі та UNPkg CDN.

Wenk - Це всього 733 байта. Суперлегка бібліотека написані в суперсучасних CSS з використанням CSSNext, LESS і SCSS так можна налаштувати та перекомпілювати стилі, як вам подобається. Wenk можна завантажити з NPM, пряжі і наступних безкоштовних послуг CDN: rawgit.com і unpkg.com.

Інструмент - Інший легка бібліотека CSS розміром близько 1 Кб. Tooltippy містить кілька попередньо сформованих тем для стилізації підказки. Це написано з CSS попередніх процесорів на ім'я Stylus. Див. Інструкцію про те, як ви можете розширити або налаштувати ці теми.

ElegantTips - Ця бібліотека має декілька попередньо побудовані теми які можна змінити за вказаними іменами класів. На відміну від інших бібліотек, які використовують HTML5 даних- або етикетці арії Атрибут ElegantTips вимагає додавання додаткового елемента для формування підказки. Це дозволяє додати буквально будь-який вміст до підказки за межами простого тексту.

Tootik - Мало того, що ця бібліотека CSS надає стилів у форматі CSS, LESS та SasS, вона також надає простий у використанні графічний інтерфейс для налаштування підказки. Ви можете просто скопіювати та вставити HTML-код, створений цим інструментом. Це так просто.

VanillaJS

TippyJS - Працює з Popper.js, TippyJS поставляється з велика кількість опцій для налаштування підказки. Ми можемо налаштувати анімацію, стрілку підказки, ширину, розмір, тему та багато іншого. Він також надає функції зворотного виклику, за допомогою яких ви можете виконувати функцію під час показу та приховання підказки. Ці функції роблять TippyJS однією з наших потужних бібліотек JavaScript у нашому списку для створення підказки.

Підказка Darsain - Ця бібліотека забезпечує базову реалізацію підказки. Тим не менш, він надає широкі можливості для налаштування поведінки тотип, і набір імен класів для зміни вигляду підказки. Підказка працює добре в старих браузерах, як IE9 і, при необхідності, IE8 з кількома коригуваннями.

Bubb - Bubb може бути добре підходить для передових користувачів JavaScript. Використання його розширені API, окрім відображення простого тексту, Ви можете програмно додати більш складний вміст HTML до підказки. Це досить здорово; Ви можете звернутися до документів на прикладах.

Поппер - Містить технічну абстракцію, щоб створити щось таке “з'являється”, як підказка, спливаюче вікно та випадаюче меню. TippyJS використовує його як фонд бібліотеки і використовується великими іменами в Інтернеті, такими як Bootstrap, Microsoft і Atlassian.

YY Підказка - На відміну від інших бібліотек, YY Tooltip не потрібно додавати елемент або атрибути HTML. Він повністю працює з JavaScript, а вміст, положення та кольори визначаються в об'єкті замість елемента HTML. Він ідеально підходить для використання у поєднанні з повноцінним веб-застосунком JavaScript.

Position.js - Ще одна чудова рідна бібліотека JavaScript для створення підказки Position.js надає графічний інтерфейс для налаштування функції і просто скопіюйте і вставте створений там код. Position.js можна використовувати разом з React.js або Vue.js.

Підказка Bezet - Ця бібліотека надає 14 опцій для відображення підказки; наприклад, на право, зліва, знизу, лівий центр, праворуч, нижній центр, Крім того, він також досить розумний, що він міг налаштувати позицію підказки на основі доступного простору навколо підказки. Перевірте демо.

MouseTip - Ця бібліотека JavaScrtipt створить a підказку, яка рухатиметься по позиції курсора. Підказка налаштована з нестандартним мишечка- замість використання HTML5 даних- атрибут. Mousetip доступний як модуль NPM.

Інтернет - Цілком схожий на MousetTip, підказка, створена цією бібліотекою слід за позицією курсора. Все налаштовано через JavaScript Object замість HTML і атрибути також побудовані для сучасних браузерів. Це легкий і швидкий.

MTip - Бібліотека JavaScript для підказки з чудова сумісність із веб-переглядачем. Він сумісний з IE8, повністю настроюється через Параметри, і ви можете додати Tooltip до будь-якого елемента навіть на img (елемент зображення).

Бульбашки - полегшена бібліотека JavaScript, яка забезпечує просту функціональність “підказку”. Використовувати бібліотеку JavaScript без ускладнених варіантів можна легко. Файл Sass надається, якщо ви хочете змінити вигляд підказки. Перевірте демо.

Тип - Створено з сучасним синтаксисом JavaScript, ES6, Tipfy розміром всього 2 Кб. Бібліотека надає дві версії файлів: tipfy.min.js надання скрипту сучасний синтаксис ES6, і tipfy.es5.min.js якщо вам потрібна сумісність зі старими браузерами. Він використовує даних- атрибут для налаштування підказки; на стороні data-tipfy, наприклад, використовується для встановлення напрямку підказки та використання data-tipfy-текст атрибут для додавання вмісту підказки.

jQuery

Tooltipster - Ця бібліотека надає широкі можливості для налаштування практично всього, наприклад, тема, анімація, дотик-підтримка, зміст, відкритий і закритий тригер, Вона також надає користувачеві слухач подій і зворотних викликів, що дозволяє розробникам розширювати підказку з користувацькими функціями. Крім того, будучи плагіном jQuery, Підказка буде працювати в старішому браузері, як IE6, залежно від версії jQuery використовуються.

Protip - Ще один розширений плагін jQuery, Protip підтримує 49 позицій, HTML для змісту підказки, підтримка значків, спеціальні зворотні виклики, і багато іншого. Protip надає графічний інтерфейс, який дозволяє легко налаштовувати підказку.

PowerTip - Цей додаток jQuery також додає параметри та API, що надають розробникам ряд різних способів реалізації підказок. Він підтримує навігація за клавіатурою; з'являються спливаючі вікна під час навігації елементами з Tab клавіатури. PowereTip є як модуль NPM. Його можна використовувати з RequireJS і Browserify.

Доступна підказка Aria - Вбудований плагін jQuery з функцією доступності, підказка призначений для відображення діалогового вікна з заголовком, багаторядковим текстом і кнопкою закриття. Це один з наших у нашому списку.

TipJS - Простий плагін jQuery, але він приносить досить характерні риси. The вміст підказки встановлюється за допомогою a підказку даних атрибут. Більше того, ми можемо також обернути вміст спеціальними символами для форматування вмісту, подібного до форматування Markdown. Ми можемо використовувати * зробити зміст напівжирним, ~ для курсиву, і ^ для заголовка.

Темна підказка - Ця бібліотека надає деякі дійсно корисні функції для активації підказки. Наприклад, ми можемо додати a button button - Так і Ні, затьмарюйте фон під час відображення підказки і додайте елементи HTML до змісту. Я думаю, ви дійсно повинні перевірити демо-сторінку.

Підказка Aria - Інша підказка з вбудованою функцією спеціальних можливостей, цей додаток jQuery є сумісним з WAI-ARIA 1.1. Він реагує так, як ви можете надають різні конфігурації для різних розмірів вікна перегляду. Aria Tooltip доступна як іменний модуль NPM t-aria-підказка.

Toolbar.js - В той час, як інший плагін jQuery може показувати простий текст або вміст HTML у підказці, це Плагін jQuery створює панель інструментів. Підказка буде містити дві або більше посилань з піктограмою, яка зазвичай виконує дію натисніть, як і будь-яка панель інструментів. Перегляньте документацію та приклади.

VueJS

V-підказка - V-Tooltip - компонент Vue.js, який працює на Popper.js під капотом. Він надає a нову директиву імені v-підказка які можна додати до будь-якого елемента для створення підказки. The v-підказка може містити вміст підказки або Параметри. Крім звичай v-підказка директива, ви також можете додати підказку з v-popover компонент. За допомогою цього компонента ви можете додати більш складний вміст до підказки з компонентом Vue.js або HTML.

Підказка Vue-Bulma - Компонент Vue.js для створення підказки на основі рамки інтерфейсу Bulma. Ця бібліотека є частиною компонента Vue Bulma. Але компонент підказки доступний як іменний модуль NPM vue-bulma-підказка це можна використовувати як окремі компоненти.

Vue-Directive-Tooltip - В цілому це схоже на V-Tooltip компонент на основі Popper.js і забезпечує ту ж саму директиву v-підказка. Однак, здається, це не забезпечує v-popover компонент.

Вуе-Тіпі - Ця бібліотека переносить Tippy.js у компонент Vue.js. Він має спеціальну директиву Vue.js v-tippy що працює як атрибут HTML; ми можемо додати вміст для підказки або параметри, щоб налаштувати її. Він також надає a користувальницький компонент Vue.js у вмісті підказки за допомогою html опції.

VueJS-Popover - Користувальницька команда Vue.js із спеціальною директивою v-popover а саме дві спеціальні компоненти і надання гнучкості розробникам для додавання підказок у програмі Vue.js.

Vue-Hint - Плагін Vue.js, який обгортає Hint.css. Можливості плагіна v-hint-css директиву для додавання підказки. Це надає такий самий набір параметрів, як Hint.css, тому ви можете додати їх як об'єкт JavaScript або модифікатор Vue.js.

ReactJS

Реакція Joyride - Компонент React для відображення набору підказок, які будуть направляйте нових користувачів для ознайомлення з новою програмою.

Реактивний флоат - Ця бібліотека обгортає Popper.js у компоненті React з назвою Floater, тому він має такі ж чудові функції, як і у Floater. Ви можете додати підказку і спливаючі вікна, і ви також можете грати з цим компонентом через цю пісочницю.

Реакція Autotip - Простий компонент React з функцією автоматичного позиціонування автоматично налаштувати позицію підказки коли вільний простір навколо нього змінюється.

Реакція Тіпі - Побудований поверх Tippy.js і Popover.js. Ця бібліотека вводить a Підказка компонент ви можете включити до програми React.

Реалізуйте підказку - Реактивний компонент, що розширює Hint.css. Компоненти додають декілька функцій, які недоступні в Hint.css, наприклад автоматичне положення, затримка та функція зворотного виклику.

Більше

Ember підказки - Компонент Ember.js для створення підказок, він побудований поверх Popper.js. Компонент також розроблений з урахуванням доступності та постійно вдосконалюється відповідно до 508 відповідності з цього питання.

D3 Порада - плагін D3.js. D3.js - це бібліотека JavaScript для візуалізації даних, як діаграми, карти, діаграми тощо. Цей плагін дозволяє показувати підказку поверх цих даних.