Skip to main content

Popover

A popover is a small overlay that appears above content, offering extra information, context, or options to the user.

Dos and Don'ts

Do
  • Use popover to display lists of options.
  • Ensure content is easy to scan for relevant and actionable information.
Don't
  • Don't use popovers for static content, use tooltips instead.
  • Don't display critical options in a popover.

Anatomy

Annotated diagram of a popover component showing its two main parts: the container and the slot.
  1. Container: Background container that organises the information.
  2. Slot: Open slot for any content required.

Variants

Default

A default popover component shown open with placeholder content inside.

Size

The width and height of the container is dynamic to the content with a minimum width of 160px. The container retains 8px of padding around the slot.

Diagram illustrating the dynamic sizing of a popover container, showing minimum width and padding around the slot.

Content

The popover container comes with a slot, so you can add any content you like to the popover. For the internal spacing of the card container, make sure to use PIE spacing tokens. You can find more information about these tokens in the spacing documentation.

Find out more about using the slot in the Figma slot guide.
Example of the popover component with the internal spacing highlighted.
Example of the popover component with the internal spacing highlighted.

Placement

Spacing

Popover should have 8px spacing between the container and the associated UI element.

Diagram showing 8px spacing between a popover container and its associated UI trigger element.

Position

A popover can open at the top, bottom, left or right depending on the position of the UI trigger on the screen, but it should never be centred.

By default, the popover opens from the bottom. If the trigger appears near to the edge of the interface, the popover may open from a different position to avoid cropping, bleeding off the page or covering important information.

Popover opening from the bottom-left position relative to its trigger.
Popover opening from the bottom-right position relative to its trigger.
Popover opening from the top-left position relative to its trigger.
Popover opening from the top-right position relative to its trigger.

Behaviours

Trigger

A trigger should be an interactive UI element, such as an icon button or a button. Popovers are triggered by clicking (on desktop) or tapping (on tablet and mobile) the trigger element.

A popover triggered by a button element.
A popover triggered by an icon button element.

Only one popover at a time

When a new popover is triggered, the previous one is dismissed.

Do
Correct example showing only one popover open at a time.
Don't
Incorrect example showing multiple popovers open simultaneously, which should be avoided.

Interactions

Close

Popover remains persistent until the user interacts with its content, clicks/taps the trigger again, or clicks/taps outside of the popover.

Popover closing when the user clicks outside of it, shown from the left side.
Example of the interactive area in a slot.
Popover closing when the user clicks outside of it, shown from the right side.
Example of the interactive area outside the popover.

Examples

Here are some examples of the component in left-to-right context.

LTR examples

Example of the popover component in a left-to-right layout, positioned on the left.
Example of the popover component in a left-to-right layout, positioned on the right.

RTL examples

Here are some examples of the component in right-to-left context.

Example of the popover component in a right-to-left layout, positioned on the left.
Example of the popover component in a right-to-left layout, positioned on the right.
Back to top