Popovers

Popovers display additional content but non-critical information when a user clicks or taps on a UI element.

Use popovers to show a longer text or when you want to have a link to an external web page.

It is shown when the user clicks on a word / icon / button / chart.

Anatomy

 

  1. UI trigger button: An interactive element that triggers the popover to open on click.
  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. Shadow. For buttons it's always the token shadow-ui-outward.
  5. Container: An area to place text and interactive elements.

Component Health

Component checklist

Is documented

The component is fully documented

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Status

The component has a health status indicated

Healthy

Repository

Includes a link to an external code repository

Open link