Tooltip
Last updated
Was this helpful?
Last updated
Was this helpful?
Тултип — это немодальная подсказка, которую пользователь открывает сам, кликом по элементу или индикатору. Не путайте с хинтом. Тултип может содержать текст, изображение, ссылки, кнопки.
Indicator. Вызывающий элемент
Label (optional). Заголовок
Text. Текст / подсказка
Дата и время (optional)
Link (optional). Ссылка
Buttons (optional). Кнопки действия
Изображение (optional)
Тултип используется для помощи в работе с интерфейсами. Например, заполнение полей, выяснение деталей ошибки и т.д. Если эти подробности не нужны постоянно, но могут помочь пользователю в момент, когда он испытывает трудности.
Если пояснение содержит много информации, то полезнее разместить его в виде статьи на отдельной странице, а в тултип добавить ссылку.
Тултип может быть вызван кликом по индикатору или иконке для показа справки или дополнительной информации.
Тултип не исчезает если после его появления прокрутить страницу.
Тултип не должен исчезать, если курсор переместился с элемента на сам тултип.
Длительность анимации открытия / закрытия тултипа — 100мс.
Tooltip позиционируется относительно компонента-триггера и не блокирует содержимое страницы. Пользователь может взаимодействовать с контентом страницы (нажимать на кнопки и переходить по ссылкам).
Закрытие Tooltip может происходить:
кнопками действия
кликом за пределами окна
клавишей ESC
Текст тултипа — максимально короткий, рекомендуется не больее 160 символов
Текст выравнивается по левому краю.
Максимальное количество кнопок в блоке - 3. Важность действия должна соответствовать оформлению кнопки
В качестве текстовой метки используйте слова, описывающие действия. Например, «Добавить», «Удалить» и «Сохранить». Избегайте расплывчатых формулировок, таких как «Готово» или «ОК».
В Tooltip схема расположения кнопок может быть вертикальной и горизонтальной.
Максимальная рекомендуемая ширина тултипа - 288рх. Высота может варьироваться до 60% от высоты экрана.
Кнопка
M-32px (outer)
Хинт
Weight: <=288px Radius: 2px
Заголовок
Dynamic_title/h4
Inter
14px
Extra Bold
Текст
Main/Body-text 14
Inter
14px
Regular
Дата и время
Main/Body-text 14
Inter
14px
Regular
Ссылка
.Button&Links/link-14px
Inter
14px
Medium
Внутренние боковые падинги - 16рх.
Отступы между наполнением контента:
Тултип может появляться справа, слева, снизу или сверху в зависимости от расположения вызываемого элемента и наличия пространства на экране.
Расстояние от вызывающего элемента до тултипа 8рх.
Если тултип может закрыть важную для пользователя информацию или другие контролы, это направление можно запретить.
Тултип не должен менять свое положение при прокрутке страницы (например, открылся вверх, но при прокрутке оказался у края браузера и переместился вниз) — в какую сторону изначально открылся, там и остается до закрытия.
Тело: #303340 — G11
Текст: #F4F6FB — G2
Заголовок: #F4F6FB — G2
Дата и время: #A1A5B7 — G5
Ссылка: #337EFF — B1
Компонент кнопка имеет свои стандартные цвета, которые можно посмотреть в его описании.
ConfirmPopup (разновидность tooltip) - немодальное всплывающее окно, которое содержит дополнительную информацию и используется для подтверждения выполнения действий через нажатие кнопки.
Заголовок. Краткое описание контента или суть процесса.
Контентная область. Содержит информацию.
Блок кнопок (footer). Содержит основные действия, необходимые для завершения или отмены задачи окна.
В ConfirmPopup схема расположения кнопок вертикальная.
Так как в ConfirmPopup не применяется кнопка закрытия (Х), используйте кнопку отмены для завершения процесса. При этом старайтесь избегать общих формулировок, текст кнопки должен максимально четко отражать последствия нажатия на нее.
Кнопка
M-32px (outer)
Хинт
Weight: <=288px
Radius: 2px
Заголовок
Dynamic_title/h4
Inter
14px
Extra Bold
Текст
Main/Body-text 14
Inter
14px
Regular
Дата и время
Main/Body-text 14
Inter
14px
Regular
Ссылка
.Button&Links/link-14px
Inter
14px
Medium
Боковые паддинги - 16 рх
Расстояние между кнопками - 8 рх
