Тултип — всплывающая подсказка в интерфейсах¶
Тултип (от англ. tooltip, «подсказка», дословно «инструмент-совет») — небольшое всплывающее окно или текстовый блок, появляющийся при наведении курсора мыши (или другом взаимодействии) на элемент интерфейса и содержащий краткую справочную информацию. Тултипы широко используются в операционных системах, веб-приложениях, настольных программах и мобильных интерфейсах для пояснения функций кнопок, имен иконок, значений полей и других элементов, чьё назначение неочевидно без пояснения.
¶Происхождение термина
Слово tooltip вошло в компьютерный лексикон в конце 1980-х — начале 1990-х годов вместе с развитием графических пользовательских интерфейсов. В русскоязычной IT-среде устоялись три варианта перевода: «тултип», «всплывающая подсказка» и «подсказка». Наиболее распространённым в профессиональной речи остаётся заимствование «тултип», тогда как в документации и учебных материалах чаще встречается «всплывающая подсказка».
¶Принцип работы
Классический тултип привязан к элементу интерфейса и отображается при наведении указателя. Алгоритм взаимодействия обычно выглядит так:
- Пользователь наводит курсор на элемент (кнопку, ссылку, иконку, ячейку таблицы).
- После задержки (типа hover delay, как правило 300–800 мс) появляется всплывающий блок с текстом.
- При уводе курсора подсказка исчезает.
Задержка предотвращает случайное срабатывание при проходе курсора через интерфейс. В некоторых реализациях тултип может быть закреплён (sticky) или содержать интерактивные элементы — ссылки, кнопки, — хотя классическое определение предполагает чисто информативный текст.
¶Реализации в технологиях
¶HTML и веб-разработка
В HTML для простейшей подсказки используется атрибут title. При наведении курсора на элемент с этим атрибутом браузер показывает системный тултип с указанным текстом. Пример: <button title="Сохранить документ">. Встроенный тултип имеет ограниченную стилизацию, не поддерживает форматирование и по-разному отображается в разных браузерах, поэтому в современной веб-разработке чаще используются кастомные реализации на CSS и JavaScript или специализированные библиотеки (Tippy.js, Popper.js и аналоги).
¶Операционные системы
В Windows тултипы реализованы на уровне API — функция TTM_TRACKACTIVATE и связанные сообщения библиотеки ComCtl32. В macOS подсказки предоставляются фреймворками AppKit и SwiftUI (модификатор .help()). В Linux GTK и Qt также имеют встроенные механизмы отображения подсказок.
¶Мобильные интерфейсы
На сенсорных устройствах понятие «наведения курсора» отсутствует, поэтому тултипы адаптируются: подсказка может появляться при долгом нажатии (long press), при первом взаимодействии с элементом или заменяться другими паттернами — онбордингом, всплывающими описаниями, иконками «?».
¶Типы тултипов
| Тип | Описание |
|---|---|
| Статический | Содержит фиксированный текст, заданный разработчиком |
| Динамический | Текст формируется в зависимости от состояния элемента или данных |
| Иконографический | Содержит только пояснение к иконке без подписи |
| Интерактивный | Включает ссылки или кнопки (расширенная реализация) |
¶Правила использования в UX-дизайне
Тултипы применяются как вспомогательный инструмент и не заменяют основные подписи. Рекомендации по их использованию включают:
- краткость текста (обычно не более 1–2 предложений);
- отсутствие критически важной информации исключительно в тултипе — её должны видеть пользователи сенсорных устройств и с помощью вспомогательных технологий;
- доступность: подсказки должны читаться скринридерами, для чего используются ARIA-атрибуты (
aria-describedby); - предсказуемость: тултип должен появляться на элементах, где пользователь ожидает пояснение (иконки без подписей, сокращения, технические термины).
¶Тултип и смежные элементы
Тултип следует отличать от тултипбара (статичной панели-подсказки в нижней части окна, характерной для ранних версий Windows и некоторых IDE), от инфотипа (расширенной карточки с подробной информацией, часто с изображением) и от баллуна — более крупного всплывающего окна с возможностью закрытия. В ряде интерфейсных библиотек эти понятия объединены, но в строгом UX-словаре это разные компоненты.
¶Применение
Тултипы используются повсеместно: в панелях инструментов графических редакторов, в системных диалогах, в таблицах данных (пояснение сокращений в заголовках), в картах (название объекта при наведении), в играх (описание предметов и навыков). В аналитических системах и BI-инструментах тултипы показывают точные значения показателей при наведении на элементы диаграмм.
Источники:
- Круглов Д. Веб-стандарты. Паттерны и практики интерфейсов.
- Nielsen J., Budiu R. Mobile Usability.
- Microsoft Windows Human Interface Guidelines.
- Material Design Guidelines. Google.
- Apple Human Interface Guidelines.