Containers & Overlays

Popover

Popover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger.

Single component

betaReact AvailableFigma AvailableDocs Partial

React last updated: 2026-07-11
Documentation last updated: 2026-06-01
Accessibility target: WCAG 2.2 AA (target)
Version: 0.5.0-beta

Known open questions

Confirm whether additional arrow placements beyond the Figma bottom variant are required.
Popover inside scrollable clipped containers may need dedicated collision tuning.

Live preview

Non-modal supplementary panel anchored to a trigger with collision-aware placement.

Informational

Interactive settings

focusMode="content" for mini-workflows.

Edge collision

Nested inside Dialog

Purpose

A small floating panel showing richer content than a Tooltip, attached to a trigger element, non-blocking.

Anatomy

Popover = trigger + floating surface + optional title + body + optional close + optional arrow.

Variants and states

default

When to use

Supplementary content or a small set of related options not needing Dialog's attention-commanding weight.

When not to use

A single short label/hint — use Tooltip. A decision requiring full attention — use Dialog.

Accessibility

Dismissible via Escape and outside click; does NOT need to trap focus, since it's non-blocking by design.

Keyboard behavior

Enter/Space toggles on trigger. Escape closes the topmost overlay and restores focus when appropriate.

Common mistakes

Confusing this with Tooltip and using it for a single short label.

Properties

Title (text), Body (text). Single Bottom-pointing arrow variant.

What is the difference between Popover and Tooltip?

Tooltip is hover/focus explanatory text without interactive controls. Popover supports richer supplementary content and actions.

What is the difference between Popover and Dialog?

Dialog is modal and inerts the page. Popover does not trap focus or block background interaction.

Should focus move into a Popover?

Only when focusMode="content" for an interactive mini-workflow. Informational Popovers keep focus on the trigger.

Should a Popover trap focus?

No. Background content remains keyboard reachable unless a parent modal Dialog is open.

Tokens used

semantic/surface/defaultsemantic/border/defaultshadow-blur/4shadow-color/4

Component API

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	—	Initial open state.
placement	"top" \| "right" \| "bottom" \| "left"	"bottom"	Preferred placement.
align	"start" \| "center" \| "end"	"center"	Alignment along the placement axis.
focusMode	"trigger" \| "content"	"trigger"	Focus entry strategy.
showArrow	boolean	true	Render the confirmed arrow variant.

React example

Copy React example

"use client";

import {
  Popover,
  PopoverBody,
  PopoverContent,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/Popover";
import { Button } from "@/components/ui/Button";

export function Example() {
  return (
    <Popover placement="bottom">
      <PopoverTrigger>
        <Button type="button">View details</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Project settings</PopoverTitle>
        <PopoverBody>
          <p>Adjust visibility and notification preferences.</p>
        </PopoverBody>
      </PopoverContent>
    </Popover>
  );
}