Popover

Overlay

Floating content container with arrow, collision detection, controlled/uncontrolled modes, and click-outside handling

Popover

Display contextual content in layered surfaces anchored to a trigger. Supports click, hover, focus triggers, multiple positions, variants, rich content, titles, footers and controlled open state.

Basic usage & triggers

Use Popover to show simple content. Choose how it appears with the trigger prop: "click" (default), "hover", "focus" or "manual".

Positions

Control where the popover appears with the position prop. Common values: top, top-start, top-end, bottom, bottom-start, bottom-end, left, right.

Variants

Use variant for semantic styling and emphasis. Match the trigger button variant for consistent designs.

Sizes

Use size to control the container dimensions:sm, md, lg, xl.

Titles, close button & footer

Enrich popovers with titles, close buttons and footer actions using title, showCloseButton and footer.

Structured popovers

Rich content

Render any React nodes inside content for profile previews, color pickers, menus and more.

Profile & color picker

Controlled popover

Use open and onOpenChange with trigger="manual" for full external control.

Manual control

Arrow & offset

Hide the decorative arrow with arrow=false and adjust distance from the trigger using offset.

Real-world examples

Use popovers for share menus, notifications and contextual help.

Menus & helpers

Usage Guidelines

When to Use

  • Rich interactions
  • Form popovers
  • Options panels

Accessibility

  • Focus trapped when open
  • Escape to close

Performance

  • Lazy content mounting
  • Efficient positioning

Common Mistakes

  • Popover that doesn't close on outside click
  • Forms in Popover without save confirmation

Frequently Asked Questions

Popover contains interactive content and stays open on click. Tooltip is for text hints.
Yes, Popover can contain forms and other interactive content.

View on GitHub

See the full source code on GitHub

Related Components

View all
Command

Command palette (⌘K) with fuzzy search, grouped commands, keyboard shortcuts, and recent history

ContextMenu

Right-click context menu with nested menus, checkboxes, radio items, and keyboard shortcuts display

Dialog

Modal dialog with focus trap, backdrop click handling, scroll locking, and nested dialog support

Drawer

Side panel with directional sliding, scroll locking, and responsive mobile-first design

Previous

PlayButton

Next

Progress