Проектування тултипів і підказок веб-додатку
Тултипи — найменший компонент у дизайн-системі й один з найчастіше зроблених неправильно. Типові проблеми: надто довгий текст, неправильне позиціонування, недоступність для користувачів клавіатури й touch-пристроїв.
Tooltip vs Popover: межа
Tooltip — лише текст, лише при ховері (і фокусі з клавіатури), немає інтерактивних елементів усередину, зникає при уході курсора. Використовується для:
- Підписів до іконок без текстової мітки
- Розшифровки абревіатур
- Підказки до disabled-елементів (чому кнопка недоступна)
Popover — може містити форму, посилання, кнопки. Відкривається клацанням, не ховером. Залишається відкритим до явного закриття. Це вже інший компонент.
На touch-пристроях hover не існує — tooltip з hover-тригером недоступний на мобілі. Рішення: замінити на Popover з tap-тригером, додати inline-підказку під полем, або відмовитися від tooltip на користь іншого паттерну.
Анатомія й параметри
Структура tooltip:
- Контейнер: фон
#1F2937(темний) або#F9FAFB(світлий), border-radius 4–6px, padding 6–10px 8–12px - Текст: 12–13px, білий на темному / gray-900 на світлому
- Стрілка (caret): 6–8px, указує на тригер
- Максимальна ширина: 200–280px зі word wrap
Варіанти по стилю:
- Dark tooltip (темний фон) — універсально працює на будь-якому фоні
- Light tooltip (світлий фон + border) — для темних інтерфейсів або для виділення
- Rich tooltip — з заголовком і іконкою, для більш детальних підказок (на межі з Popover)
Позиціонування
12 позицій за аналогією з Popover: top/bottom/left/right × start/center/end. За замовчуванням — top-center. Flip-логіка: якщо tooltip виходить за viewport, автоматично переключається на протилежну сторону.
У Figma: Component з Variants за напрямком. У коді: бібліотеки @floating-ui/react (сучасний стандарт) або Tippy.js / Radix UI Tooltip автоматично обробляють позиціонування й flip.
Затримка появи й зникнення
Tooltip не повинен з'являтися миттєво: надто чутливо до випадкових наведень. Рекомендовані параметри:
- Delay show: 300–500ms
- Delay hide: 100–150ms (трохи повільніше, щоб встигнути навести курсор на сам tooltip для копіювання тексту)
Анімація: opacity 0→1, duration 150ms, ease-out. Без трансформацій — tooltip маленький, анімація руху не потрібна.
Підказки до полів форм (Field Hints)
Окремий паттерн — підказки у формах. Це не tooltip, а inline-текст під полем. Три варіанти:
- Helper text — постійна підказка під полем (формат, обмеження)
- Validation message — помилка або успіх після валідації
- Character counter — лічильник символів для обмежених полів
У дизайні важливо виконати ієрархію: helper text — сірий, error — червоний, success — зелений; все в одному місці (не стрибати між tooltip і inline).
Терміни
Проектування системи тултипів і підказок (tooltip, rich tooltip, field hints, всі позиції й стани) — 1–2 дні: всі варіанти компонента у Figma з auto layout, специфікації анімацій, правила використання.