Тултип Tooltip

Тултип — это подсказка, которую пользователь открывает сам, кликом по элементу.

Обычно маленькую подсказку называют тултип, а большую хинт. Но в Контур.Гайдах всё наоборот. Так исторически сложилось. Зато проще запомнить: меньше слово — меньше контрол.

При общении с пользователями мы говорим не «тултип», а «всплывающая подсказка».

Когда использовать

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

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

Описание работы

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

Для ссылки, открывающей тултип со справкой или дополнительной информации в наборе Kontur-Iconic предусмотрено несколько вариантов:

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

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

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

В тултипе, который открывается по клику обязателен крестик для закрытия.

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

В тултипах, которые открываются по фокусу или наведению крестик не нужен.

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

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

Размер и расположение

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

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

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

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

Указатель тултипа всегда находится на расстоянии 2px от границ объекта, либо на расстоянии 2px от видимых границ, если границы объекта отличаются от видимых более чем на 10px.

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