The Popover Component is a layer that appears above all other content on a page. 


The Popover Component is a layer that appears above all other content on a page containing text and interactive elements. The popover contains a caret tip to help show the relationship between the popover and where it was triggered from.

When to Use

A popover should be used sparingly and intentionally since it disrupts all other content on a page. A popover can be used when you need to display additional details for specific elements on a page.



Popover anatomy diagram
  1. Title
  2. Body Copy
  3. Optional CTA (button, button group, link)
  4. Caret tip
  5. Dismiss icon

Interactive Trigger Button

A popover is controlled by a trigger button. An interactive element must trigger the popover to open on mouse click or keyboard press (SPACEBAR/ENTER). This interactive element is a button by function but can visually change its shape and size depending on the use case.

The popover is triggered by an interactive button. There should be 4px of padding between the trigger and the caret and have 4px of spacing in all orientations. The caret tip of the popover must be aligned to the trigger button and is arranged dynamically based on where the trigger button is in relation to the page.

Popover anatomy diagram


Popover anatomy diagram



Content Type

Recommended Character Limit

Title (optional)



Body Copy



Call to Action (optional)

Button, Button Group, Link


Close Icon

Icon Button