Skip to main content

Overlays and menus

Popover

Render a lightweight anchored overlay. Like a tooltip that went to the gym and got buff.

Curated demo

Click empty stage to test outside click behavior.

Toggle title, placement, and outside-click dismissal, then reopen preview as needed.

Reference

Render a lightweight anchored overlay. Like a tooltip that went to the gym and got buff.

  • Use Popover for small supporting content blocks. Don't put an entire form inside a popover.
  • Add a title when content needs a visible label and dismiss button.
  • Only disable outside-click dismissal when another obvious close path exists.

Props

Name Type Default Description
id string — Unique ID for the popover.
open boolean false Whether the popover is open.
position 'top' | 'bottom' | 'left' | 'right' 'bottom' Position relative to trigger.
title string — Optional title.
closeOnOutsideClick boolean true Close on outside click.
class string — Additional CSS classes.

Example snippet

<Popover
  open
  position="right"
  title="Details"
>
  <p>Popover content stays short and contextual.</p>
</Popover>