components icon

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

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
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.

ComponentUse case
PopoverPopover 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.
TooltipTooltip is a container that temporarily displays short, contextual text and is activated when a user hovers or focuses on an icon or other trigger.
DrawerDrawer is a secondary content component that sits off-screen until triggered by the user. It can contain multiple interactive elements and extensive content.

Anatomy

Alt text
The anatomy of popover, labeled 1 through 4.

Popovers can contain up to four elements:

  1. Popover title: a headline indicating the popover’s purpose.
  2. Pointer: directs user’s attention to the source element that triggered the popover.
  3. Dismiss icon: to close the popover.
  4. Body: area for text, images, links, and other content.