Tooltip

Общая информация

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

Анатомия

1. Indicator. Вызывающий элемент

2. Label (optional). Заголовок

3. Text. Текст / подсказка

4. Дата и время (optional)

5. Link (optional). Ссылка

6. Buttons (optional). Кнопки действия

7. Изображение (optional)

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

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

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

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

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

2. Тултип не исчезает если после его появления прокрутить страницу.

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

4. Длительность анимации открытия / закрытия тултипа — 100мс.

Позиционирование

Tooltip позиционируется относительно компонента-триггера и не блокирует содержимое страницы. Пользователь может взаимодействовать с контентом страницы (нажимать на кнопки и переходить по ссылкам).

Закрытие

Закрытие Tooltip может происходить:

• кнопками действия

• кликом за пределами окна

• клавишей ESC

Оформление

Текст

• Текст тултипа — максимально короткий, рекомендуется не больее 160 символов

• Текст выравнивается по левому краю.

Кнопки

Максимальное количество кнопок в блоке - 3. Важность действия должна соответствовать оформлению кнопки

В качестве текстовой метки используйте слова, описывающие действия. Например, «Добавить», «Удалить» и «Сохранить». Избегайте расплывчатых формулировок, таких как «Готово» или «ОК».

Блок кнопок

В Tooltip схема расположения кнопок может быть вертикальной и горизонтальной.

Так как в 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рх.

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

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

Цвета

Тултип

1. Тело: #303340 — G11

2. Текст: #F4F6FB — G2

3. Заголовок: #F4F6FB — G2

4. Дата и время: #A1A5B7 — G5

5. Ссылка: #337EFF — B1

Компонент кнопка имеет свои стандартные цвета, которые можно посмотреть в его описании.

---

! Confirm popup !

Общая информация

ConfirmPopup (разновидность tooltip) - немодальное всплывающее окно, которое содержит дополнительную информацию и используется для подтверждения выполнения действий через нажатие кнопки.

Анатомия ConfirmPopup

1. Заголовок. Краткое описание контента или суть процесса.

2. Контентная область. Содержит информацию.

3. Блок кнопок (footer). Содержит основные действия, необходимые для завершения или отмены задачи окна.

Оформление

Блок кнопок

В ConfirmPopup схема расположения кнопок вертикальная.

Так как в ConfirmPopup не применяется кнопка закрытия (Х), используйте кнопку отмены для завершения процесса. При этом старайтесь избегать общих формулировок, текст кнопки должен максимально четко отражать последствия нажатия на нее.

Размеры

Внешние размеры

Высота ConfirmPopup зависит от его контеного наполнения и не должна превышать 80% от высоты экрана. Ширина не дожна превышать 50% от ширины экрана.

Элемент	Значение
Кнопка	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 рх