Плохо спроектированный тултип — одна из частых причин ухудшения 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, анимационные спецификации, правила использования.