Playground

Preview

defaultBottom

Variant

Size

Side

Options

<Popover>
  <Popover.Trigger asChild>
    <Button variant="outline">Open Popover</Button>
  </Popover.Trigger>
  <Popover.Content>
    <div className="space-y-2">
      <h4 className="font-semibold text-foreground">Settings</h4>
      <p className="text-sm text-text-muted">
        Configure your preferences here.
      </p>
    </div>
  </Popover.Content>
</Popover>

Variants

Default

Paper background with border and shadow — for general-purpose popovers

Forms, settings

Elevated

Glassmorphism background with backdrop blur — for refined floating panels

Profiles, details

Sizes

sm

Font13px

Padding12px

Radius8px

default

Font13px

Padding16px

Radius12px

lg

Font14px

Padding20px

Radius12px

Size	Font	Padding	Radius
`sm`	13px (text-sm)	12px	8px (rounded-lg)
`default`	13px (text-sm)	16px	12px (rounded-xl)
`lg`	14px (text-md)	20px	12px (rounded-xl)

Features

Side Placement

Supports 4 sides (top, right, bottom, left). Default isbottom.

<Popover.Content side="top">Top</Popover.Content>
<Popover.Content side="right">Right</Popover.Content>
<Popover.Content side="bottom">Bottom</Popover.Content>
<Popover.Content side="left">Left</Popover.Content>

Arrow

showArrowcontrols arrow visibility toward the trigger. Shown by default.

{/* With arrow (default) */}
<Popover.Content>With arrow</Popover.Content>

{/* Without arrow */}
<Popover.Content showArrow={false}>No arrow</Popover.Content>

Close Button

showCloseshows a built-in close button.closeIconcustomizes the close icon.

<Popover.Content showClose>
  <h4 className="font-semibold pr-6">Settings</h4>
  <p>Content with close button</p>
</Popover.Content>

Alignment

alignadjusts alignment relative to the trigger.

<Popover.Content align="start">Start</Popover.Content>
<Popover.Content align="center">Center</Popover.Content>
<Popover.Content align="end">End</Popover.Content>

Modal Mode

modalblocks background interaction when enabled — focus trap is applied automatically.

<Popover modal>
  <Popover.Trigger asChild>
    <Button>Modal Popover</Button>
  </Popover.Trigger>
  <Popover.Content showClose>
    Background interaction is blocked
  </Popover.Content>
</Popover>

API

Component Structure

Popover— Radix Popover

.Trigger.ContentProps.Arrow.Close.Anchor.Portal

.TriggerClick target

.ContentPropsPopover body (variant · size · side · arrow · close)

.ArrowArrow indicator (built into Content)

.CloseClose button (built-in or manual)

.AnchorCustom anchor point

.PortalPortal (built into Content)

Props

Popover (Root)

openundefined

boolean

Controlled open state

defaultOpenfalse

boolean

Initial open state (uncontrolled)

onOpenChangeundefined

(open: boolean) => void

Callback when open state changes

modalfalse

boolean

Block background interaction and apply focus trap

Name	Type	Default	Description
`open`	`boolean`	`undefined`	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	`undefined`	Callback when open state changes
`modal`	`boolean`	`false`	Block background interaction and apply focus trap

Popover.Content

variant"default"

"default" | "elevated"

Visual style (default: paper background with border and shadow, elevated: glassmorphism)

size"default"

"sm" | "default" | "lg"

Text size and padding

side"bottom"

"top" | "right" | "bottom" | "left"

Placement side

sideOffsetauto (12 with arrow, 6 without)

number

Distance from trigger (auto: 12px with arrow, 6px without)

align"center"

"start" | "center" | "end"

Alignment relative to trigger

showArrowtrue

boolean

Show arrow indicator

showClosefalse

boolean

Show built-in close button

closeIconundefined

ReactNode

Custom icon for the close button

Name	Type	Default	Description
`variant`	`"default" \| "elevated"`	`"default"`	Visual style (default: paper background with border and shadow, elevated: glassmorphism)
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Text size and padding
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Placement side
`sideOffset`	`number`	`auto (12 with arrow, 6 without)`	Distance from trigger (auto: 12px with arrow, 6px without)
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to trigger
`showArrow`	`boolean`	`true`	Show arrow indicator
`showClose`	`boolean`	`false`	Show built-in close button
`closeIcon`	`ReactNode`	`undefined`	Custom icon for the close button

Code Recipes

Anatomy

1

Open popover

sideOffset: 12px

3

2

4

1

Trigger

Launch button

2

Content

Floating panel

3

Arrow

Direction arrow

4

Close

Close button

Best Practices

✓

Do

✓Use Popover for inline editing and form input
✓Suitable for interactive content like links and buttons
✓Use as a lightweight alternative to confirmation dialogs
✓Provide a clear dismiss action via close button or Popover.Close

✕

Don't

✕Don't use Popover for simple hints — use Tooltip instead
✕Don't put large amounts of content in Popover — use Modal instead
✕Don't use Popover for menu lists — use Dropdown instead
✕Don't nest Popovers — it creates complex UX

Popover vs Tooltip

Similar floating UIs — different purposes and interactions.

Trigger

Popover: Click

Tooltip: Hover / Focus

Content

Popover: Rich (forms, buttons, links)

Tooltip: Text only (short hint)

Interaction

Popover: Yes (interactive)

Tooltip: None (read only)

Default side

Popover: bottom (natural top-to-bottom flow)

Tooltip: top (non-intrusive)

Dismiss

Popover: Outside click / Esc / Close button

Tooltip: Auto on hover end

ARIA

Popover: aria-expanded + aria-controls

Tooltip: role="tooltip"

Feature	Popover	Tooltip
Trigger	Click	Hover / Focus
Content	Rich (forms, buttons, links)	Text only (short hint)
Interaction	Yes (interactive)	None (read only)
Default side	bottom (natural top-to-bottom flow)	top (non-intrusive)
Dismiss	Outside click / Esc / Close button	Auto on hover end
ARIA	aria-expanded + aria-controls	role="tooltip"

Key difference: Use Popover for interactive content opened by click. Use Tooltip for simple hover hints.

Accessibility

Keyboard

Enter / SpaceOpen / close the popover

EscClose the popover

TabMove focus within content

ARIA / WCAG

aria-expanded Auto-applied to trigger
aria-controls Auto-linked
Automatic focus management (open/close)
Automatic collision avoidance

Popover

Playground

Variants

Sizes

Features

Side Placement

Arrow

Close Button

Alignment

Modal Mode

API

Component Structure

Props

Popover (Root)

Popover.Content

Code Recipes

Anatomy

Best Practices

Do

Don't

Popover vs Tooltip

Accessibility

Keyboard

ARIA / WCAG

Related

Tooltip

Modal

Dropdown