Всплывающая подсказка или тултип 💬

Что это

Короткая подсказка к интерактивному элементу с дополнительной информацией о его функциях. Появляется при клике на элемент и при взаимодействии с ним с клавиатуры.

Что с мобильными устройствами

Если что-то отрывается при касании, то это не тултип, а попап. С точки зрения UX (User Experience) и дизайна тултипы могут быть только в десктопных интерфейсах.

Когда пригодится

У элемента нет подписи, только иконка
Нужно чуть подробнее объяснить функцию

Дизайн

Тултипы могут быть у любых интерактивных элементов
Короткий текст c дополнительным объяснением или описыванием конкретного элемента — микротекст
Появляются, когда пользователь повзаимодействовал с элементом, не сами по себе
Использовали тултип для одного элемента, не забудьте добавить ко всем похожим
Если тултипов много, поможет стрелка: так проще определить, к какому элементу относится тултип

Код

Программно связан с главным элементом с помощью aria-describedby или aria-labelledby
Можно добавить роль tooltip, но не обязательно
Показывать при событиях focus и mouseenter, закрывать при событиях blur и mouseleave и нажатии на Esc

Важные замечания

Элемент с ролью tooltip можно связать только с элементом, который описывает тултип
У роли tooltip плохая поддержка
В aria-describedby и aria-labelledby может быть только текст