​​Related Pages:  Tooltips

Description

A popover is a small overlay used to display supplementary content or actions, without obscuring the page or taking the user out of context.

It appears as a result of a user action, such as clicking an icon button or a link.

Usage and Behavior

General Guidelines

• Popovers always appear in response to a user action.

• Popovers display contextual information that you don’t always want or need to be visible at all times.

• Only one popover can be active on a page at a time.

Structure

A popover consists of:

• Header (optional).

• Close button ( X ).

• Content area.

• Pointing tip, pointing to the element it relates to.

Open

Common examples:

Variants	Image

Variants	Image
Default - displays non-critical information in blocks of text	Open
With a list of items
With a data table
With form fields
With complex text and action buttons

Placement & Positioning

• Popovers are displayed relative to the interface element that triggers them.

• By default, popovers are placed to the right of the trigger element. However, where there isn't enough space to the right, the popover will be displayed to the left, below or above the element, and the pointing tip will change accordingly.

• Popovers should have a default width, but they can have different sizes depending on the amount of content.

• When the content inside the popover exceeds the maximum height defined for the container, a Scrollbar will appear inside the popover (not recommended).

Content

• Popovers may contain rich content, such as headings, links, and data.

• The main content area may have a variety of layouts. See the Common Examples above.

• If exist, Icon buttons should appear at the bottom of the popover.

Internal Logic

• Unlike a Tooltip, a user can interact with the popover content.

• Popovers never follow the cursor as it moves.

• Popovers do not close automatically after a set time.

• Where user input is required, the action will be performed instantly.

Interaction

• Clicking the trigger element displays the popover.

• The popover remains visible until it is dismissed by the user, either by:

  • clicking the close button (X),

  • clicking anywhere outside of the popover, or

  • pressing the Escape key.

• Other elements on the screen are still interactive while a popover is open.

  • Hovering over another item will leave the popover open.

  • Clicking or selecting another item will also close the popover.

Best practices

Use:

• When there is too much content to be shown inline.

• When you want to display additional content without taking the user out of context.

Don’t use:

• When you don’t have a lot of content to display (10 words or fewer) → use a Tooltip instead.

• When the content takes a lot of space or when focusing on the triggered element is not required → consider using a Dialog instead.

General:

• Do not use dialog buttons in popovers.

Accessibility

• Focus navigation must remain within an open popover

• When closing the popover using keyboard for the X button or the Escape key, the focus will be placed back on the triggering element.

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Code