Тултип Tooltip

Тултип — это подсказка, которая объясняет состояние контрола, даёт контекстную справку, подсказывает или обучает пользователя.

Тултип открывается по клику, фокусом, триггером или наведением, тем самым помогает оставлять интерфейс лаконичным, уводя дополнительную информацию на дополнительный слой интерфейса.

Используйте тултип, когда нужно дополнительно пояснить состояние интерфейса или контрола, дать справку, подсказку или определение.

Если для пояснения требуется много текста, например больше 500 символов, то лучше написать статью и дать на неё ссылку в тултипе.

Тултип может содержать контент, например кнопку, ссылку или иллюстрацию, а вот хинт нет.

Для подсказки или дополнительной информации открывайте тултип кликом по всему контролу. Например, по ссылке или иконке.

В библиотеке интерфейсных иконок предусмотрено несколько вариантов иконок для справки или дополнительной информации:

• — стандартный вариант для контекстной справки;
• — менее заметный аналог предыдущей иконки;
• — если в тултипе не помощь, а скорее дополнительная информация.

Не используйте иконку для вызова тултипа с контекстной справкой. Эта иконка предназначена для ссылок на руководство пользователя.

Во время валидации открывайте тултип по наведению или фокусу на валидируемый контрол. Подробнее — в гайде «Валидация».

Тултип открывается одним из 5 способов:

• По клику на элемент,
• По наведению,
• По фокусу,
• Совмещённый — по фокусу или наведению,
• По триггеру, в случае контекстного обучения.

Если тултип открывается по клику, в нём обязательно должен быть крестик для закрытия.

Такой тултип закрывается кликом за его пределами и не блокирует активные элементы на странице. Например, если пользователь кликнул по ссылке вне тултипа, он закрывается, и происходит переход по ссылке.

Если тултип открывается по фокусу, у него не должно быть крестика. Такой тултип закрывается сам, когда элемент теряет фокус.

Если тултип открывается по наведению, у него не должно быть крестика. Такой тултип закрывается сам, когда элемент теряет фокус.

Тултип, который открывается по наведению на элемент интерфейса, не должен исчезать, если курсор переместился с элемента на сам тултип.

Такие тултипы открываются и исчезают с задержкой в 100 миллисекунд.

Задержка на появление нужна, чтобы при движении курсора по странице не было случайного моргания тултипов.

Задержка на исчезновение нужна, чтобы пользователь успел перевести курсор на тултип и взаимодействовать с содержимым тултипа — например, выделить текст или нажать на ссылку.

Если тултип открывается по фокусу или наведению, у него не должно быть крестика. Такой тултип закрывается сам, когда элемент теряет фокус.

Это режим, необходимый для работы тултипов валидации с предупреждениями или сообщениями об ошибках. Такие тултипы открываются либо по фокусу на элементе, либо когда на элемент навели курсор мыши.

Задержка на появление и исчезновение работает так же как у тултипов с появлением по наведению. Тултип не должен исчезать, если курсор переместился с элемента на сам тултип.

Тултип должен быть компактным, не перекрывать большую часть экрана и не выходить за его границы. Рекомендуемая ширина прямоугольной области тултипа — 250 px, максимальная — 500 px.

Тултип появляется справа от вызвавшего его элемента. Если справа не хватает места, то с других сторон от элемента, в порядке убывания приоритета: справа, сверху, слева, снизу — против часовой стрелки.

Если тултип может закрыть важную для пользователя информацию или другие контролы, то это направление тултипа следует запретить для тултипа и открывать его в другие стороны.

Указатель тултипа расположен напротив первого символа первой строки внутреннего текста. В результате текст на странице выровнен с текстом в тултипе:

Указатель тултипа всегда находится на расстоянии 2 px от границ объекта, либо на расстоянии 4 px от видимых границ, если границы объекта отличаются от видимых более чем на 16 px. Подробнее — в гайде «Отступы и выравнивание».

Тултип не меняет своё положение при скролле страницы — в какую сторону изначально открылся, там и остаётся до закрытия. Например, если тултип открылся вверх и при скролле оказался у края окна браузера, то он не перемещается в другую сторону.