Skip to content
hightouchUI

Design system

v40.8.0

Popover

Popover is an overlay positioned relative to the trigger element.

Usage

Basic

Wrap the popover's main content in PopoverBody — it provides consistent padding and body styling inside PopoverContent.

Guidelines

When to use

  • When there's an additional functionality related to the target element, but page layout doesn't have an appropriate place to display that functionality.

When not to use

  • If popover content doesn't have rich formatting or focusable elements, use a tooltip.

Content

  • Use sentence case.
  • Don't add a cancel button, popover can be closed via Esc or clicking elsewhere on the page.

API

Chakra Docs