Спливаюча підказка, крихітний елемент інтерфейсу, який або рятує користувача, або дратує його до скреготу. Ви навели курсор на іконку, очікуючи підказку, а отримали: порожній квадратик, обрізаний текст або спливашку, яка втекла за край екрана.

Ручне написання тултипів з нуля — це морока з позиціюванням, z-index, адаптивністю та анімацією. Готові бібліотеки вирішують усе це парою рядків коду. Але яку обрати, коли на ринку десятки варіантів, від мікроскопічних CSS-сніпетів до повноцінних фреймворків для product tours?

Ми зібрали 21 opensource-плагін для спливаючих підказок на JavaScript, jQuery та чистому CSS, з живими скриншотами та чесним розбором можливостей. Тут є інструменти під будь-який сценарій: швидкий tooltip для лендингу, тултип з HTML-контентом для вебзастосунку та покроковий onboarding для SaaS.

💡 Швидкий огляд:

• Оберіть категорію: чистий CSS, jQuery або vanilla JS.
• Вирішіть, що всередині: лише текст або HTML із зображеннями та кнопками.
• Перевірте автопозиціювання: щоб тултип не виходив за край екрана.
• Для product tours беріть Intro.js або Hopscotch, вони заточені під onboarding.

Оглядова таблиця: 21 плагін за 30 секунд

1. Tippy.js

Tippy.js — це фактичний стандарт для спливаючих підказок у сучасному фронтенді. Бібліотека від розробника atomiks побудована поверх Popper.js (пізніше, Floating UI) і дає бездоганне позиціювання: тултип сам ухиляється від країв екрана, перевертається та підлаштовується під viewport.

Всередині, все, що потрібно для серйозного UI: анімація через CSS-переходи, інтерактивні тултипи (можна клікати по вмісту, не закриваючи), відстеження курсора, вкладені підказки та лінивий рендеринг. Підтримує React, Vue і чистий DOM.

З нашого досвіду, на Tippy.js варто переходити, коли проєкт переростає jQuery-зоопарк: бібліотека прибирає більшу частину головного болю з позиціюванням без жодного рядка ручного CSS.

Плюси: дерево залежностей мінімальне, типізація TypeScript з коробки, документація з живими прикладами. Мінуси: для простого текстового тултипа на лендингу, забагато; розмір бандла ~30 KB (хоча tree-shaking допомагає).

🔗 Tippy.js на GitHub🔗 Документація та демо

2. Tooltipster

Tooltipster, ветеран серед jQuery-плагінів для тултипів, який не перетворився на гарбуза. Бібліотека працює з 2012 року й досі отримує оновлення. Головна фішка, чотири готові теми оформлення (default, light, borderless, punk) плюс можливість зібрати свою через CSS.

Tooltipster вміє HTML-контент, AJAX-підвантаження, кілька тригерів (hover, click, focus, програмний виклик), таймери показу/приховування та колбеки на кожен етап життєвого циклу. Окремий плюс, вбудована підтримка сенсорних пристроїв: тап по елементу показує тултип, повторний тап, приховує.

На практиці Tooltipster добре стає в проєкти на WordPress та jQuery-стеку, де тягнути сучасний бандл з npm незручно: просто підключили скрипт, налаштували опції, і всі посилання з title перетворилися на симпатичні підказки.

Плюси: зрілий плагін з передбачуваною поведінкою, відмінна документація, сенсорна підтримка. Мінуси: прив'язаний до jQuery (у 2026 це вже залежність, яку багато хто хоче прибрати).

🔗 Tooltipster на GitHub

3. CSS Tooltip

Мінімалістичний тултип на чистому CSS: HTML-елемент із data-tooltip, псевдоелементи ::before і ::after для стрілки та фону, плюс плавний transition при наведенні. Жодного JavaScript, навіть обробники подій не потрібні.

Рішення підійде для статичного контенту: блогів, документації, лендингів. Важить менше кілобайта, не потребує залежностей і не впливає на First Input Delay. Достатньо скопіювати CSS-сніпет у проєкт і розставити data-атрибути.

Плюси: нульовий JS, миттєва продуктивність, легко кастомізувати кольори та відступи. Мінуси: лише текст, немає автопозиціювання, на мобільних поведінка обмежена (немає ховеру).

4. Tipr

Tipr, крихітний jQuery-плагін (менше 2 KB у мініфікації), який робить рівно одну справу: показує спливну підказку при наведенні на будь-який HTML-елемент. Плаский дизайн, без зарубок, мінімальне налаштування через data-атрибути.

Ідеальний, коли потрібно «просто щоб працювало» без зайвих абстракцій. Підтримує чотири позиції, кастомні класи та зміну тригера. Наша порада: беріть Tipr для невеликих проєктів, де jQuery вже є і не хочеться додавати заради тултипів окрему залежність.

Плюси: мікроскопічний розмір, простий API, не потребує конфігурації. Мінуси: закинутий автором, позиціювання примітивне (біля краю екрана може обрізатися).

Tipr доступний на GitHub

5. Поява спливної підказки (CSS Tooltip Appear)

Ще одна реалізація на чистому CSS, цього разу з акцентом на анімацію появи. Тултип виїжджає плавно, з настроюваною тривалістю та кривою easing. Підходить для ситуацій, де важливий не функціонал, а візуальне враження: портфоліо, промосторінки, презентаційні сайти.

Плюси: гарна анімація, чистий CSS, жодних скриптів. Мінуси: лише текст, немає позиціювання біля країв екрана, немає інтерактиву.

6. Grumble.js

Grumble.js вирізняється візуально: тултип стилізований під комікс-бульбашку і може обертатися навколо цільового елемента на 360 градусів із кроком в 1°. Розробник James Cryer створив плагін спеціально для нестандартних UI, де звичайний прямокутник виглядав би чужорідно.

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

Плюси: унікальний дизайн, точне керування кутом, приємна анімація. Мінуси: не підтримується, древній jQuery, немає адаптиву.

🔗 Grumble.js на GitHub

7. Protip

Protip, jQuery-плагін, який позиціювався як «тултип для будь-якої ситуації». Кілька скінів (включно з темною темою), анімовані переходи, чотири позиції та підтримка HTML. Судячи з репозиторію, автор реалізував API з прицілом на розширюваність: можна каскадувати налаштування та задавати глобальні дефолти.

На практиці Protip, міцний середняк для проєктів на jQuery. Не такий потужний, як Tooltipster, але для базових сценаріїв вистачає.

Плюси: кілька тем, зручне API, анімація. Мінуси: репозиторій не оновлюється, документація скупа.

Protip доступний на GitHub

8. Tipped

Tipped, легка JavaScript-бібліотека без залежностей. Підтримує кілька скінів, розмірів і варіантів взаємодії: ховер, клік, фокус, ручний виклик. Позиціювання фіксоване (чотири сторони), без розумного ухиляння від країв, для простих інтерфейсів цього достатньо.

Зазначимо, що бібліотека давно не оновлювалася і community-підтримка мінімальна. У 2026 році для нового проєкту ми б рекомендували Tippy.js, але якщо проєкт уже на Tipped і працює, змінювати сенсу немає.

Плюси: без залежностей, простий API, кілька скінів. Мінуси: немає автопозиціювання, проєкт виглядає закинутим.

Tipped доступний на GitHub

9. Microtip

Microtip від розробника Indrashish Ghosh — це бібліотека підказок на чистому CSS, яка важить менше 1 KB у gzip. Доступність із коробки (aria-label + role="tooltip"), анімація на GPU (transform замість top/left), адаптивний шрифт.

Наш улюблений сценарій для Microtip, іконки без підписів в адмінці чи інтерфейсі: повісив aria-label, додав клас, і користувач отримує підказку без жодного рядка JavaScript. Бібліотека активно використовується в проєктах на GitHub (3.5k+ зірок), хоча великих оновлень в останні пару років не було.

Плюси: ультралегка, accessibility-ready, не гальмує рендеринг. Мінуси: тільки текст, немає інтерактиву, фіксована позиція.

🔗 Microtip на GitHub

10. Auto Tooltips

Auto Tooltips, JavaScript-бібліотека, яка автоматично вибирає оптимальну позицію для підказки залежно від доступного простору. На відміну від Microtip або CSS Tooltip, тут підказка може перестрибнути на інший бік елемента, якщо біля краю екрана бракує місця.

Візуально, стилізовані підказки з тінню та заокругленими кутами. Логіка позиціювання написана без зовнішніх залежностей, уся бібліотека вміщується в кілька кілобайт.

Плюси: автоматичне позиціювання, легковажність, стильний дизайн. Мінуси: репозиторій неактивний, документація мінімальна.

11. JBox

JBox — це не просто підказка, а універсальний діалоговий фреймворк на jQuery. Окрім спливних підказок, він уміє модальні вікна, сповіщення (notice) і повноекранні оверлеї. Кожен тип діалогу, окремий плагін у межах загальної архітектури.

З нашого досвіду, JBox добрий у проєктах, де потрібен єдиний візуальний стиль для всіх спливних елементів. Бібліотека підтримує AJAX-контент, анімацію, колбеки й адаптивне позиціювання. Розмір виправданий функціональністю: ~20 KB за повний набір діалогових компонентів.

Плюси: чотири типи діалогів в одному пакеті, хороша документація, активна підтримка. Мінуси: залежність від jQuery, надлишковий, якщо потрібні лише підказки.

🔗 JBox на GitHub

12. Wenk

Wenk (з гінді, «нічний світлячок»), CSS-бібліотека підказок, яка використовує data-атрибути для позиціювання. Можна задати положення (data-wenk="left"), довжину та стиль стрілки. Уся магія на чистому CSS, плюс опціональний JS-файл для автоматичного вибору позиції.

Вага, близько 1.2 KB у мініфікації. Чудовий вибір, коли Microtip здається занадто мінімалістичним, а тягнути Tippy.js не хочеться.

Плюси: data-атрибути для позиції, легкий JS-хелпер, приємний дизайн. Мінуси: немає інтерактивних підказок, позиціювання обмежене вісьмома напрямками.

Wenk доступний на GitHub

13. Crumble

Crumble, надбудова над Grumble.js, що додає ефект «розсипання» бульбашки під час закриття. Візуально цікавий концепт, але подвійна залежність (jQuery + Grumble.js) і повна відсутність оновлень роблять його винятково історичним експонатом.

Ми включили Crumble в добірку заради повноти та візуального розмаїття, але для реального проєкту шукайте більш живі альтернативи.

Плюси: унікальна анімація закриття, привертає увагу. Мінуси: дві застарілі залежності, не для продакшену.

🔗 Grumble.js (залежність)

14. Intro.js

Intro.js — це вже не підказка, а повноцінний фреймворк для користувацького онбордингу. За допомогою бібліотеки ви створюєте покрокові інструкції: підсвічування елемента, спливне вікно з поясненням, кнопки «Далі»/«Готово». Жодних залежностей, чистий JavaScript.

У нашому тесті Intro.js показав себе як найзріліший інструмент для product tours: 23k+ зірок на GitHub, TypeScript-кодова база, підтримка багатосторінкових турів (з передаванням стану між сторінками), кастомізація через CSS-класи та колбеки на кожен крок.

Плюси: де-факто стандарт для onboarding-турів, активна розробка, докладна документація. Мінуси: ~45 KB, виправдано функціоналом, але для простої підказки надлишково.

🔗 Intro.js на GitHub🔗 Жива демонстрація

15. PowerTip

PowerTip від Steven Benner (автора jQuery QueryBuilder) пропонує цікаву концепцію: система правил (rule system) гарантує, що на екрані одночасно видно лише одну підказку. Це вирішує класичну проблему, коли користувач швидко проводить курсором по кількох елементах і отримує мішанину з підказок, що накладаються одна на одну.

Плагін підтримує складну розмітку всередині підказки (включно з AJAX-контентом), кастомні тригери та позиціювання у восьми напрямках. У jQuery-проєктах PowerTip, один із найнадійніших варіантів.

Плюси: розумна система показу, HTML-контент, стабільна робота. Мінуси: залежність від jQuery, репозиторій отримує рідкісні оновлення.

🔗 PowerTip на GitHub

16. Toolbar.js

Toolbar.js від Paul Kinzett — це підхід «підказка як панель інструментів»: спливне вікно містить не просто текст, а кнопки, іконки, посилання. Типовий сценарій: виділив текст на сторінці, з’явилася панель із кнопками «Копіювати», «Поділитися», «Пошук».

Плагін використовує Popper.js для позиціювання, що гарантує коректну поведінку біля країв екрана. Проєкт набрав понад 2,3 тис. зірок, але значних оновлень останніми роками не було. Концептуально Toolbar.js вплинув на багато сучасних UI-патернів (medium-подібні панелі виділення).

Плюси: унікальний підхід «підказка як панель дій», гарне позиціювання. Мінуси: проєкт заморожено, прив’язаний до старої версії Popper.js.

🔗 Toolbar.js на GitHub

17. Simptip

Simptip — це CSS-бібліотека підказок, написана на Sass із використанням міксинів і змінних. Це робить її зручною для проєктів, де зовнішній вигляд підказок має точно збігатися з дизайн-системою: змінили змінну $bg-color, і всі підказки перефарбувалися.

Бібліотека підтримує м’які та гострі стрілки, чотири позиції та ефект появи (fade-in). Вага мінімальна: скомпільований CSS, близько 2 KB.

Плюси: Sass-змінні для кастомізації, акуратний дизайн, легковажність. Мінуси: немає HTML-контенту, проєкт не оновлювався.

🔗 Simptip на GitHub

18. HubSpot Tooltip

HubSpot відкрив вихідний код своєї внутрішньої бібліотеки підказок, вона побудована поверх Tether (рушій позиціювання, попередник Popper.js) і Drop (бібліотека для випадних елементів). Поєднання дає потужну, гнучку систему підказок з автопозиціюванням.

Зараз HubSpot Tooltip становить радше історичний інтерес: бібліотека не оновлюється, Tether офіційно замінено на Popper.js (а згодом на Floating UI). Тим не менш, архітектурні рішення HubSpot вплинули на сучасні бібліотеки, сам підхід «рушій позиціювання + рушій відображення» став стандартом.

Плюси: промислова якість коду, гарне позиціювання, підтримка HTML. Мінуси: застарілі залежності (Tether), проєкт заморожено.

🔗 HubSpot Tooltip на GitHub

19. Hopscotch

Hopscotch, другий після Intro.js фреймворк для створення product tours. Підхід відрізняється: замість ланцюжка DOM-елементів ви описуєте тур у вигляді JSON-об'єкта (кроки, цілі, контент), а бібліотека сама керує рендерингом і навігацією. Підтримує багатосторінкові тури, користувач переходить за посиланням, а тур продовжується з того ж кроку.

Проєкт перейшов під крило організації broccolijs-archive і заморожений. Для нового продукту ми рекомендуємо Intro.js, але якщо ви підтримуєте legacy-код із Hopscotch, він усе ще працює та задокументований.

Плюси: JSON-опис турів, багатосторінкова підтримка, зрілий API. Мінуси: проєкт заархівовано, немає нових фіч.

Hopscotch на GitHub (проєкт заархівовано)

20. Darktooltip

Darktooltip, jQuery-плагін із фіксованим темним дизайном, підтримкою HTML-контенту та анімацією появи. API просте: викликали .darktooltip() на елементі, передали опції, готово. Підходить для невеликих віджетів та адмінок, де потрібен швидкий консистентний тултип без зайвих маніпуляцій із CSS.

З нашого досвіду, Darktooltip — це нішевий інструмент: якщо темна тема вписується в дизайн, він працює добре; якщо потрібне кастомізування кольорів, простіше взяти Tooltipster або Tippy.js.

Плюси: просте API, HTML-контент, приємна анімація. Мінуси: лише темна тема, залежність від jQuery, проєкт неактивний.

🔗 Darktooltip на GitHub

21. Tipso

Tipso закриває добірку як приємний легкий jQuery-плагін із CSS3-анімацією. Адаптивний дизайн з коробки (тултип змінює розмір на мобільних), кілька тригерів і позицій, підтримка HTML. Окремо відзначимо, що Tipso існує у вигляді плагіна для WordPress — це може бути зручно для власників WP-сайтів, які не хочуть лізти в код.

Бібліотека не оновлювалася кілька років, але кодова база стабільна й не має критичних багів. Для простих jQuery-проєктів, робочий варіант.

Плюси: адаптивність, WordPress-версія, приємна анімація. Мінуси: не оновлюється, прив'язана до jQuery.

🔗 Tipso на GitHub

Як ми тестували та як обрати свій тултип

Ми проганяли кожен плагін через один і той самий чек-лист: завантаження на порожній сторінці, рендеринг біля краю екрана, поведінка при швидкій зміні ховера, мобільний тап, кастомізування кольорів/шрифтів. Оцінки в таблиці вище, не абстрактні «зірки», а прямий результат цих тестів.

Для швидкого вибору тримайте матрицю відповідності:

• Лендинг, блог, документація → Microtip або Wenk. Чистий CSS, миттєве завантаження, нічого зайвого.
• Адмінка на jQuery, WordPress-сайт → Tooltipster. Зрілий, стабільний, із сенсорною підтримкою.
• Сучасний вебзастосунок, React/Vue → Tippy.js. Найкраще позиціювання на ринку, TypeScript, активна розробка.
• Діалогові вікна + тултипи + сповіщення в одному флаконі → JBox. Єдиний стиль для всіх спливних елементів.
• Product tour, onboarding, покрокові інструкції → Intro.js. Стандарт індустрії, 23k+ зірок, багатосторінкові тури.

Загальне правило, яке ми вивели з тестів: якщо сумніваєтеся, беріть Tippy.js. Він покриває переважну більшість сценаріїв, не тягне jQuery і вирішує проблему позиціювання раз і назавжди. А якщо проєкт уже на jQuery і бюджет на міграцію не закладено, Tooltipster не підведе.

Відео: як створити гарний тултип на чистому CSS

Щоб побачити тултипи в дії, подивіться цей туторіал від AlgoKage, за 10 хвилин ви зберете стильну спливну підказку без жодного рядка JavaScript:

⁉️🤔 Часті запитання

Чи потрібен JavaScript для спливних підказок?

Необов'язково. Для простого текстового тултипа на десктопі достатньо CSS (Microtip, Wenk, Simptip). Але якщо потрібен HTML-контент, автопозиціювання біля країв екрана, тригер за кліком або підтримка мобільних, без JavaScript не обійтися. Tippy.js і Tooltipster закривають ці сценарії.

Наскільки важлива доступність (a11y) у тултипах?

Критично. Користувачі скринридерів мають отримати текст підказки без наведення курсора. Правильний підхід: використовуйте aria-describedby на тригері та role="tooltip" на самій підказці. Tippy.js і Microtip підтримують це з коробки. Якщо пишете свій тултип, не ігноруйте WAI-ARIA.

Чим Tippy.js кращий за старий Tooltipster?

Tippy.js не залежить від jQuery, написаний на TypeScript, використовує Floating UI для позиціювання (тултип завжди залишається в межах viewport) і підтримує tree-shaking. Tooltipster, зрілий і стабільний, але залежність від jQuery у 2026 році для нових проєктів небажана. Якщо у вас уже jQuery-стек, Tooltipster, чудовий вибір; якщо стартуєте з нуля, Tippy.js.

Чи можна використовувати кілька тултип-бібліотек на одному сайті?

Технічно так, але на практиці це створює конфлікти стилів, дублювання коду та плутанину під час налагодження. Виняток, Microtip для іконок + Intro.js для product tour: їхні зони відповідальності не перетинаються. У загальному випадку оберіть одну бібліотеку під основний сценарій.

Чому тултипи обрізаються на мобільних?

Мобільні пристрої не мають ховера, а viewport у них вузький. Тултипи, які на десктопі показуються праворуч від елемента, на мобільному можуть вийти за екран. Рішення: або адаптивна позиція (Tippy.js уміє автоматично вибирати сторону), або заміна тултипа на клікабельний popover для мобільних.

Чи варто використовувати Grumble.js або Crumble у реальному проєкті?

Ні. Обидві бібліотеки не оновлювалися понад 10 років і залежать від застарілої версії jQuery. Візуально вони цікаві як концепти, але для продакшену беріть сучасні аналоги: Tippy.js із кастомною темою може імітувати будь-який візуальний стиль без застарілих залежностей.

Який плагін тултипів обрати у 2026 році?

Двадцять один плагін — це багато для вибору, але по-справжньому універсальних серед них три: Microtip для надлегких CSS-підказок, Tooltipster для jQuery-проєктів і Tippy.js для всього іншого. Intro.js стоїть окремо — це не тултип, а фреймворк для онбордингу, і у своїй ніші він найкращий.

Решта вісімнадцять — це або нішеві інструменти під специфічний дизайн (Darktooltip, Simptip), або історичні артефакти, що вплинули на індустрію (Grumble.js, HubSpot Tooltip), або добротні, але заморожені проєкти, які все ще працюють, хоча для нового коду краще взяти щось живе.

Якщо ви дочитали до цього місця, добірка своє завдання виконала: тепер ви знаєте, який плагін брати під ваш проєкт. Беріть і пробуйте, усі посилання на документацію та репозиторії є в описі кожного інструмента.