Popover

Popover – это всплывающая подсказка, которая появляется при наведении или по клику на элемент либо при фокусировании на элементе с помощью клавиатуры.

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

§Виды Popover

§Информационные (Info)

Для использования в повседневных интерфейсах.

§Специальные (Special)

Для использования в промо-активностях.

§Анонсы (Announcement)

Для объявлений и уведомлений, которые важно подсветить, но не очень активно.

§Параметры

Описанные ниже параметры можно настраивать для всех видов Popover (информационных, специальных и анонсов):

• размеры;
• тип контента;
• расположение;
• кнопка «Закрыть»;
• способ открытия и закрытия;
• тайминг.

§Размеры

Размеры компонента отличаются кеглем и отступами от краев. Ширина и высота компонента при этом подстраиваются под контент.

§Тип контента

Компонент поддерживает следующие элементы:

1. Заголовок.
2. Описание.
3. Кнопки действий (можно использовать одну или две кнопки, а также менять их местами).
4. Иконку закрытия.
5. Пин (хвостик) – дополнительный индикатор привязки к элементу интерфейса. Помогает в случаях, когда рядом много элементов и надо сфокусировать внимание пользователя на каком-то конкретном.

§Расположение

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

§Кнопка «Закрыть»

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

§Способ открытия и закрытия

• При наведении на элемент Компонент исчезает при отведении курсора.
• При клике на элемент Для закрытия компонента необходимо нажать на иконку с крестиком.
• При фокусировании на элементе с помощью клавиатуры Popover исчезает, когда элемент теряет фокус.
• Автоматически без каких-либо действий пользователя Когда пользователь попадет на страницу, Popover уже будет открыт. Подходит для рекламных и обучающих подсказок. Для закрытия необходимо нажать на иконку с крестиком.
• В ответ на какие-либо действия в интерфейсе К примеру, при онбординге, когда предусмотрена серия подсказок.

§Тайминг

• Без задержек в появлении и исчезновении Popover откроется и закроется мгновенно. Подходит для простых повседневных подсказок.
• С задержкой появления и исчезновения Задержка появления полезна, если на странице много элементов, вызывающих подсказки. Она поможет избежать случайных наведений на элементы и появления нежелательных подсказок. Задержка закрытия необходима, если подсказка содержит кнопки, чтобы пользователь успел довести курсор до кнопки, пока подсказка не закрылась.
• С задержкой исчезновения Если Popover содержит кнопки, но нет необходимости задерживать появление, используйте этот вариант.

§Особые случаи

В большинстве случаев для предоставления дополнительной информации подойдет Popover. Однако есть кейсы, в которых следует отдать предпочтение другим компонентам.

• Если у вас сложная подсказка и элементов, которые поддерживаются внутри компонента Popover, вам недостаточно, вы можете спроектировать подсказку на базе компонента Popup.
• Если вам нужно предоставить пользователю объяснение или дополнительную информацию о действии, которое совершится после клика на кнопку, используйте для этого не Popover, а Action Tooltip или Tooltip.