Popover

Popover is a container that floats over page content after pressing a trigger element. It contains supplemental content related to its trigger, and can be customized to include text, images, and interactions.

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
React	In backlogElement is in backlog
Documentation	PublishedElement can be used in production

What's new

Popover was redesigned to meet accessibility requirements and address mobile experiences. It incorporates the updated foundations including the new font ramp and color palette. The design features new pointer position options and three different sizes: small, medium, and large.

When to use

Popover is similar to tooltip and drawer but are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.

Component	Use case
Popover	Popover is a container that displays supplemental information after pressing its trigger element. They can contain limited interactions with its content, but should not contain actions that are required for the experience.
Tooltip	Tooltip is a container that temporarily displays short, contextual text and is activated when a user hovers or focuses on an icon or other trigger.
Drawer	Drawer is a secondary content component that sits off-screen until triggered by the user. It can contain multiple interactive elements and extensive content.

Anatomy

Usage

Popover is triggered via pressing a text link or button icon. It contains supplemental interactive content that adds details and assistance to the specific piece of content that acts as its trigger. Interactions with the content of a popover give additional context or link to other sources of information. Use when content may be helpful to some users but is too extensive to include inline. Use popovers sparingly and allow only one popover to display at a time. If popovers proliferate, users may experience cognitive overload.

Sample content in a popover, including text, a link, and an image. — Popover displays information associated with an element on press, not on hover.

Sizes

Popover is provided in small, medium, and large fixed widths. If a popover is set to large but will not fit on a screen, the popover will go to medium. This does not work in reverse. If a small popover covers a viewable area, the pointer can be removed. Popover does not have a default height but will extend to fit, and contract to hug its contents. There is not a maximum absolute height, but popover is limited to 80% of the height of the screen to ensure the entire component is displayed. If there is more content than can fit in the popover at 80% screen height, a scrollbar will be introduced.

Size	Use case
Large	Use with larger viewports for complex or larger content flows
Medium	Use for most interactive supplemental content
Small	Made for small, simple helper content

Layout

Position

Position the popover in relation to the source element either above, below, to its left, or to its right. The popover defaults to the center position above or below the trigger when possible, but can be placed in one of three positions on each side of the component if needed. As with tooltip, make sure the direction and placement of your popover don’t obscure information on the page that the popover content is directly related to.

Position	Location
Top	Above the source element (default)
Right	To the right of the source element
Bottom	Below the source element
Left	To the left of the source element

Pointer position	Location
Center	Popover above, pointer points down to the source element (default)
Start	Top or left in left-to-right localizations
End	Bottom or right in left-to-right localizations
Left	To the left of the source element

Interaction

Behavior and states

Popover is opened by pressing a trigger, and closed by pressing the trigger again or pressing the dismiss icon. Upon press, the component hovers in one of four positions; to the top, right, bottom, or left of the trigger. On small screens, it may cover the entire viewable area including the trigger.

Interactive elements within the content of an open popover can include a scroll bar, external links, a view more/less component, a table component, and other displayed content but should not include submittable forms, select components, or other complex interactions. Consider drawer or modal for more extensive supplemental content.

State	Behavior
Rest	The rest state is indicated by a trigger available to focus or press.
Hover	A popover trigger typically does not have a hover state, but may follow button styles if using a secondary or tertiary style.
Pressed	The popover window opens above content with its pointer on, or near the trigger, indicating the trigger’s source and what the trigger’s content is related to.

Once the popover is closed, the component will return to its rest state.

Standards

Accessibility

Make sure all popover headings are unique and accurate
Popover headings should be descriptive and identify it against other content on the page.
WCAG 2.1: 1.1.1 Non-Text Content (w3.org), 1.3.1 Info and Relationships (w3.org)

Avoid using triggers to initiate popovers which are not user-initiated
Popovers should be user-initiated. A popover should not be automatically triggered by other conditions such as “5 seconds after page load” or “when the user mouses away from the browser window.”
WCAG 2.1: 3.2.5 Change on Request

Avoid covering up critical content with a popover
As with tooltips, make sure that the direction and placement of your popover doesn’t obscure information on the page that the popover content is directly related to.

Follow approved popover focus behavior for keyboard users:

Command	Description
On activation	The default initial focus should be on the popover’s dismiss button. If warranted by the content, you may use a different focus.
Tab (initial press)	Focus should move to the next interactive element inside the popover.
Tab (subsequent presses)	Cycles focus through interactive elements inside the popover following visual order wherever possible. On the last interactive element inside popover, tab moves focus back to the first focusable interactive element in the popover.
Shift + Tab	Cycles focus through interactive elements in a reverse direction.
Escape key (esc)	Dismisses the popover.

Content

Popover headlines
Be brief and descriptive about the purpose of the popover. The header length should not exceed one line.
Do: Help me choose
Don’t: Comparing Pentium-class versus Xeon-class processors

Body text
Popover content should be centered around the trigger and what is essential for a user to know in relation to it. Content can include imagery, tables, and more text than a tooltip, but should not require interaction to continue. If content exceeds the container height, a scrollbar will appear, but consider placing longer content within the on-page experience or using a different component like drawer.

Avoid placing complex content or functionality inside a popover. Content should be short and limited to simple, contextual functionality that relates directly to a particular item or control on the page. More complex content, such as a form, should be placed in either a modal or on the page directly.

Capitalization

Use sentence case for labels, default values, detected values, and autocompleted text, unless referencing product names and proper nouns.

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<div data-trigger="#popover" data-dds="popover" class="dds__popover" role="dialog" data-placement="top" aria-labelledby="popover-title">
  <div class="dds__popover__content">
    <div class="dds__popover__header">
      <h6 class="dds__popover__headline" id="popover-title">Popover Headline</h6>
    </div>
    <div class="dds__popover__body">Small, light, and stylish laptops and 2-in-1s designed for ultimate productivity.</div>
  </div>
</div>

Copy code

View the popover demo and code in Vanilla.

Visit Storybook

Popover

Status

Contents

What's new

When to use

Anatomy

Contents

Contents

Usage

Sizes

Layout

Position

Interaction

Behavior and states

Standards

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Popover

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

Contents

What's new

When to use

Anatomy