Тултип — всплывающая подсказка в интерфейсе¶
Тултип (tooltip, от англ. tool — «инструмент» и tip — «кончик, подсказка») — небольшое всплывающее окно с кратким текстовым пояснением, которое появляется при наведении курсора на элемент графического пользовательского интерфейса. Тултипы используются для раскрытия дополнительной информации без перехода к другому экрану или диалогу: расшифровки сокращений, имён иконок, значений элементов, подсказок по управлению. В русскоязычной литературе по интерфейсам встречается также калькированный вариант «тултип» и перевод «всплывающая подсказка».
¶История
Практика показывать пояснение при наведении на элемент интерфейса появилась в конце 1980-х — начале 1990-х годов вместе с развитием графических оболочек. Одним из ранних массовых примеров стал Microsoft Windows 3.1 (1992), где всплывающие подсказки сопровождали кнопки панели инструментов и элементы меню. В вебе тултипы получили распространение после появления атрибута title в HTML, а затем — с развитием JavaScript-библиотек и CSS-решений, позволивших управлять внешним видом и поведением подсказки.
¶Устройство и поведение
Классический тултип реализуется средствами HTML-атрибута title: браузер показывает содержимое атрибута в виде стандартного жёлтого прямоугольника после задержки в несколько сотен миллисекунд. Такие подсказки имеют ограниченный набор возможностей: нельзя задать форматирование, изображение, интерактивные элементы или управлять позиционированием.
Библиотеки и фреймворки (jQuery UI, Bootstrap, Tippy.js, Popper.js и другие) предоставляют расширенные тултипы с возможностью:
- задавать произвольное HTML-содержимое, включая картинки и ссылки;
- выбирать сторону появления (сверху, снизу, слева, справа) и смещение от элемента;
- настраивать задержку показа и скрытия;
- обрабатывать события наведения, фокуса и касания;
- автоматически размещать подсказку в пределах экрана.
В операционных системах (Windows, macOS, Linux с GNOME/KDE) тултипы реализованы на уровне оконного менеджера и показываются для элементов панели задач, кнопок и полей управления.
¶Тултип и доступность
С точки зрения доступности тултипы имеют ограничения: пользователи клавиатуры и вспомогательных технологий (скринридеров) не всегда получают доступ к содержимому подсказки. Стандарт WAI-ARIA рекомендует использовать роли tooltip и связывать подсказку с элементом через aria-describedby, а также обеспечивать возможность показа подсказки при получении фокуса, а не только при наведении мыши. Стандарт WCAG требует, чтобы информация, передаваемая только тултипом, была доступна и другими способами.
¶Тултипы в мобильных интерфейсах
На сенсорных экранах нет постоянного наведения, поэтому тултипы адаптируются: подсказка может показываться по долгому нажатию (long press), по касанию иконки с вопросительным знаком или по первому взаимодействию с элементом. Многие мобильные приложения заменяют тултипы онбордингом — пошаговым показом подсказок при первом запуске.
¶Тултипы в разработке
В средах разработки тултипы применяются для отображения документации API: при наведении на символ в редакторе кода (Visual Studio Code, IntelliJ IDEA) показывается сигнатура функции, документация и примеры использования. В системах визуализации данных (BI-инструменты, графики) тултипы отображают точные значения точек, сегментов диаграмм и элементов легенды.
¶Критика
Тултипы критикуются за то, что скрывают информацию от пользователей, не использующих мышь, и за недоступность на сенсорных устройствах. Чрезмерное использование подсказок перегружает интерфейс и замедляет работу: пользователю приходится «обходить» элементы курсором, чтобы собрать информацию. UX-специалисты рекомендуют использовать тултипы только для второстепенной информации, а не для критически важных инструкций.
¶Источники
- Круглов А. «Интерфейсы. Дизайн на основе правил»
- Салливан Т. «Паттерны проектирования интерфейсов»
- Документация W3C по WAI-ARIA
- Документация Microsoft по Windows UX Guidelines