Тултипы (всплывающие подсказки) — это небольшие информационные элементы, которые появляются рядом с интерфейсными объектами при наведении курсора или фокусе. Они раскрывают дополнительную информацию об элементе, объясняют его назначение или подсказывают возможные действия.
Они особенно полезны для элементов с не совсем очевидным значением, например, сокращений, технических терминов, иконок или более сложных функций. Важным правилом является использование тултипов только там, где они действительно помогают пользователю. Избегайте избыточных подсказок для очевидных элементов.
Базовая анатомия
Основа тултипа — текстовый блок со скругленными углами и иногда стрелкой, указывающей на элемент. Контейнер должен иметь четкие отступы и полупрозрачный или не выделяющийся фон. Стрелка может располагаться с любой стороны, всегда указывая на центр элемента.
Варианты наполнения
Простой тултип содержит только текст. Более сложные могут включать заголовок, изображения, форматированный текст или даже интерактивные элементы. При большом объеме контента добавляется прокрутка.
Система позиционирования
Следует отдать приоритет позициям сверху и снизу.
При наведении курсора тултип должен плавно проявляться с небольшой задержкой, начиная с точки появления стрелки. При уходе курсора тултип исчезает мгновенно, чтобы не мешать дальнейшему взаимодействию с интерфейсом.
Поведение при прокрутке
Тултип следует за элементом при прокрутке страницы. Если элемент выходит за пределы экрана, тултип скрывается. При возвращении элемента в поле зрения тултип появляется снова, если курсор все еще над ним.
Множественные тултипы
Если кратко, то тултипы не должны появляться одновременно, это может произойти только в случае, если они относятся к одному элементу и их действительно нужно было разделить.
