Skip to main contentCarbon Design System

Popover

A popover is a layer that pops up over all other elements on a page.

New in v11! Popover is a new component we have added to our system and is only available in v11.

Overview

A popover is a layer that appears above all other content on the page. Only one popover can appear at a time and can contain varying text and interactive elements. Popovers are used as a base layer in some of our components like tooltips, overflow menus, and dropdown menus.

When to use

  • Use when placing interactive elements, like links, buttons, or rich media to make the component more accessible. Disclosures that contain interactive elements use popovers as a base container layer to achieve this accessibility standard. For further guidance on how to display content within a popover, see the disclosure pattern.
  • Use when you need to display additional details for specific elements on a page. If your popover exceeds four columns in width, use a modal instead.

Live demo

CodeSandbox React 


<Popover open>

  <div className="popover-trigger">

    <Checkbox />

  </div>

  <PopoverContent>

    <div className="popover-example-content">

      <p className="popover-title">Available storage</p>

      <p className="popover-details">

        This server has 150 GB of block storage remaining.

      </p>

    </div>

  </PopoverContent>

</Popover>
Popover
Modifiers
align

Variants

By default, a popovers structure is made up of a container with no additional tip. Depending on the use case, caret tips or tab tips can be added to the container to help show the relationship between the popover and where it was triggered from.

VariantPurpose
No tipPopovers without a tip are typically used when the trigger button has a visually defined down state.
Caret tipPopovers with a caret tip should be used to help show the relationship between the popover and where it was triggered from. A caret tip is typically used when the trigger button does not have a visually defined down state and for icon buttons.
Tab tipPopovers can have a tab tip when the popover is connected to a toolbar or header area.
Popover variants

Formatting

Anatomy

Popover anatomy
  1. UI trigger button: An interactive element that triggers the popover to open on click, hover, or focus.
  2. Tip: An indicator that is added to a popover container to help show the relationship between the popover and where it was triggered from.
  3. Content area: An area to place text and interactive elements.
  4. Container: An area to place text and interactive elements.

Sizing

Container

The width and height of a popover container can vary depending on the amount of content placed within it. We recommend to not exceed a popover width size of four columns.