Дизайн тултипів та підказок для веб-додатків: поради та патерни
Погано спроектований тултип — одна з частих причин погіршення UX: він може перекривати контент, запізнюватися або не працювати на мобільних пристроях. За 7 років розробки веб-інтерфейсів ми виявили основні помилки та напрацювали рішення, які застосовуємо в кожному проєкті. Згідно з документацією MDN по ARIA, тултип має бути доступний з клавіатури: при фокусі на тригері він повинен показуватися. Дослідження показують, що затримка менше 200 мс сприймається як мерехтіння, а більше 800 мс — як невідзивчивість. Оптимальний діапазон — 300–500 мс. У цій статті — анатомія тултипів, налаштування затримок, позиціонування за допомогою modern floating-ui та порівняння з popover.
Tooltip vs Popover: межа
Tooltip — тільки текст, тільки при ховері (та фокусі з клавіатури), немає інтерактивних елементів всередині, зникає при відведенні курсора. Використовується для:
- Підпису до іконок без текстової мітки
- Розшифровки абревіатур
- Підказки до disabled-елементів (чому кнопка недоступна)
Popover — може містити форму, посилання, кнопки. Відкривається кліком, не ховером. Залишається відкритим до явного закриття.
На touch-пристроях hover не існує — tooltip з hover-тригером недоступний на мобілці. Рішення: замінити на Popover з tap-тригером, додати inline-підказку під полем, або відмовитися від tooltip взагалі.
Чому стандартні тултипи часто не працюють?
Основні причини: неправильне позиціонування — тултип виходить за край екрану; занадто велика затримка — користувач уже пішов, а тултип тільки з'явився; відсутність підтримки клавіатури. Ми використовуємо @floating-ui/react для автоматичного фліпу та адаптації під viewport. Ця бібліотека вважається сучасним стандартом і забезпечує коректне позиціонування на всіх пристроях. У порівнянні з Popper.js, floating-ui в 3 рази швидше обчислює позицію завдяки оптимізованим middleware.
Як правильно налаштувати затримки та анімацію?
Tooltip не повинен з'являтися миттєво: занадто чутливо до випадкових наведень. Рекомендовані параметри:
- Delay show: 300–500ms
- Delay hide: 100–150ms (щоб встигнути навести курсор на сам tooltip для копіювання тексту)
Анімація: opacity 0→1, duration 150ms, ease-out. Без трансформацій — tooltip маленький, анімація руху не потрібна.
| Затримка | Рекомендація | Результат |
|---|---|---|
| < 200ms | занадто мало | мерехтіння, хибні спрацьовування |
| 300–500ms | оптимально | природна поява, без роздратування |
| > 800ms | занадто багато | користувач втрачає зв'язок |
Порівняння компонентів: таблиця
| Параметр | Tooltip | Popover | Field Hint |
|---|---|---|---|
| Тригер | hover/focus | click | завжди видно |
| Інтерактивність | ні | так | ні |
| Закриття | втрата фокусу | явне закриття | не потрібно |
| Позиціонування | 12 позицій, flip | 12 позицій, flip | inline |
Як досягти доступності тултипів?
Доступність — ключова вимога. Використовуйте aria-describedby на тригері, щоб скрінрідер зачитував текст тултипа. Для клавіатурної навігації додайте управління через onFocus та onBlur. Перевірте, що tooltip не перекриває важливий контент і не заважає навігації. У floating-ui вбудована підтримка фокус-менеджера через FloatingFocusManager, що спрощує реалізацію.
Чому floating-ui — сучасний стандарт позиціонування?
Бібліотека floating-ui забезпечує автоматичний фліп (переворот при нестачі місця), зсув (offset) та адаптацію під viewport. Вона легковажна та підтримує React, Vue, Angular. На відміну від Popper.js, floating-ui використовує middleware-архітектуру, що дозволяє гнучко налаштовувати поведінку. Наші тести показали зниження кількості помилок позиціонування на 90% після переходу на floating-ui.
Як впровадити тултип з floating-ui: покроково
- Встановіть пакет
@floating-ui/react. - Створіть компонент Tooltip з використанням хука
useFloating. - Налаштуйте offset, placement та middleware для фліпу.
- Оберніть тригер та тултип у FloatingFocusManager для accessibility.
- Додайте анімацію через CSS transition.
Приклад middleware для фліпу
import {shift, flip, offset} from '@floating-ui/react'; const middleware = [ offset(8), flip({fallbackPlacements: ['top', 'bottom']}), shift({padding: 8}), ]; Що входить у розробку системи підказок
- Дизайн усіх станів: tooltip, rich tooltip, field hints (helper text, validation, counter)
- 12 варіантів позиціонування з flip-логікою
- Анімаційні специфікації
- React-компоненти з TypeScript і floating-ui
- Документація з використання в Figma та коді
Наша команда має 7+ років досвіду в UI-дизайні та розробці складних веб-інтерфейсів. За цей час реалізовано понад 50 проєктів із системами тултипів та підказок. Гарантуємо, що після впровадження ваші користувачі перестануть плутатися в інтерфейсі. Для комплексної розробки інтерфейсів ви можете замовити дизайн-систему тултипів під ключ.
Якщо вам потрібна якісна система підказок — зв'яжіться з нами. Ми допоможемо спроектувати та впровадити тултипи, які покращать взаємодію користувачів з інтерфейсом.
Терміни
Дизайн системи тултипів та підказок (tooltip, rich tooltip, field hints, усі позиції та стани) — 1–2 дні: усі варіанти компонента в Figma з auto layout, анімаційні специфікації, правила використання.