Тултип Tooltip

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

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

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

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

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

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

Тултип вызывается кликом по ссылке или специальной иконке. В наборе Kontur-Iconic предусмотрено несколько вариантов:

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

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

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

В тултипе обязателен крестик для закрытия. Также тултип закрывается любым кликом за его пределами. Открытый тултип не блокирует клики за его пределами.

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

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

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

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

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

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