Home

Popover

UsageDevelopment

About

A Popover is a view that appears on top of other content in order to display additional, contextual information about the element that is being clicked, hovered or highlighted without blocking the user.

Anatomy

A Popover consists of:

  1. Container
  2. Close icon
  3. Headline (optional)
  4. Body text
  5. Button (optional)
  6. Pointer to indicate related element

Popover anatomy

When to use a Popover

  • A Popover can be used to display additional information about specific elements; for example a help text.
  • A Popover can be used to display contextual information; for example in a UI tour or a feature promotion.
  • A Popover can be used to host low-complexity functionality related to a specific element.

When not to use a Popover

  • Never use a Popover to display warnings. Instead, use a Dialog, Alert or Toast notification.
  • Never use a Popover to contain lengthy or complex information. Instead, use a Dialog or a separate page.

Size & placement

Size

The width of a Popover component spans between 375 - 500 px (pointer area excluded). You can use the default sizes to keep Popovers consistent across your UI. If needed, you could also adjust the width, only as long as it remains within the min-max span.

The height of a Popover is flexible and dependant on its content. However, it should never exceed the max-height.

  • Small: Width: 375 px (pointer area excluded), Height: depending on content (max 309 px)
  • Large: Width: 500 px (pointer area excluded), Height: depending on content (max 309 px)

Popover size

Placement

  • The container of the Popover can be aligned to the start, center or end to make sure important information remains visible.

Popover placement-1

Popover placement-2

Note: the position of the arrow behaves responsive in terms of adjusting its position according to the screen it’s used in.

  • A Popover should never go off-screen or block important information.

Recommended position for the popover
Give the Popover a logical position in relation to the component it was triggered from.
Do

Not recommended position for the popover
Do not position the Popover on top of relevant information.
Don’t
  • When positioning the Popover in line with its related element, please comply to the spacing below.

Popover recommended spacing

Behaviour

States

A Popover doesn’t have any additional states; it’s either visible or hidden.

Default

By default, a Popover is hidden.

Interaction

A Popover can be triggered by hover or click/tap:

  • Hover: the Popover appears as soon as the related element is hovered. The Popover will disappear automatically as soon as the mouse leaves the interactive area of the related element.
  • Click/tap: the Popover appears when the related element is clicked/tapped. The Popover will be closed on the next click/tap on anything other than the focused element itself or by clicking the close icon.
  • System event: For example, when first-time-login is true, a series of Popovers could be initiated to explain the app’s main functionalities.

Timing

Timing differs based on the trigger that is active:

  • Hover: the Popover appears after 300ms of hovering, to reduce triggers by unintentional hovering. A Popover disappears after 100ms when the mouse leaves the interactive area of the related element.
  • Click/tap: the Popover appears after 100ms when the related element is clicked/tapped. The Popover disappears after 100ms when the user clicks/taps on the close icon or anything outside of the focused component.

Keyboard behaviour

When the Popover control is in focus, it can be opened by pressing Enter. The Popover will be closed as soon as the focus is moved outside of the component.

Content

  • The headline used in a Popover should be short, clear and descriptive.

Clear headlines
Do write clear, descriptive headlines.
Do

Not generic headlines
Don’t write general headlines.
Don’t
  • The body text used in a Popover should elaborate on the element that is being interacted with and respect the component’s maximum height.

Add additional information button for right height
Do link to additional information if the total amount of information would exceed the Popover’s maximum height.
Do

Not right height of the popover
Do not break the Popover’s maximum height in order to fit in large amounts of information.
Don’t
  • As explained at Interaction, a Popover generally closes on the user’s next click/tap anywhere else than on the focused element itself or by clicking the close icon. Therefore, an additional Close/Cancel/Done button is obsolete.

Recommended way to close popover
Do respect the close icon functionality as a way to close a Popover.
Do

Not recommended way to close popover
Don’t use buttons to replicate the close icon functionality.
Don’t
  • The button labels used in a Popover should allow users to understand the result of their action right away.

Other best practices

The Popover is part of our Notifications set. Have a look at the patterns related to this set.

Nesting components

A Popover can use:

  • Button component

A Popover can be used in:

  • Dialog component

Resources