Дизайн тултипов и подсказок веб-приложения
Тултипы — самый маленький компонент в дизайн-системе и один из самых часто сделанных неправильно. Типичные проблемы: слишком длинный текст, неправильное позиционирование, недоступность для пользователей клавиатуры и touch-устройств.
Tooltip vs Popover: граница
Tooltip — только текст, только при ховере (и фокусе с клавиатуры), нет интерактивных элементов внутри, исчезает при уходе курсора. Используется для:
- Подписи к иконкам без текстовой метки
- Расшифровки аббревиатур
- Подсказки к disabled-элементам (почему кнопка недоступна)
Popover — может содержать форму, ссылки, кнопки. Открывается кликом, не ховером. Остаётся открытым до явного закрытия. Это уже другой компонент.
На touch-устройствах hover не существует — tooltip с hover-триггером недоступен на мобиле. Решения: заменить на Popover с tap-триггером, добавить inline-подсказку под полем, или отказаться от tooltip вовсе в пользу другого паттерна.
Анатомия и параметры
Структура tooltip:
- Контейнер: фон
#1F2937(dark) или#F9FAFB(light), border-radius 4–6px, padding 6–10px 8–12px - Текст: 12–13px, white на тёмном / 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, анимационные спецификации, правила использования.