Popover

Popover

Component preview

A small contextual surface opened deliberately to show supporting content or controls without making the whole page modal.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: flyout, info popover, context panel

a small panel when I click the info button
show extra settings beside this control
a floating box with a link inside
open help without blocking the page
a little card anchored to the button
click to reveal more details in place

Try it

Small contextual surfaces

Compare all three behaviors

Shared comparison scenario: A project workspace must reveal brief help, supporting details, or a short action list from a compact control without leaving the current task.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Your task

Open the explanation, follow its internal focus order, then close it without losing your place.

Edge case to verify

When space is tight, collision handling repositions the panel without covering the trigger or moving focus unexpectedly.

Parts of the specimen

Use it when

Showing a compact explanation with a link
Editing a small group of contextual settings

Avoid it when

The task needs a large or modal workflow
The surface is only a short passive hint

Compare similar concepts

Choose Tooltip only when the content is brief and contains no interactive element; use Popover for controls or richer content.

Tooltip

Use Dropdown menu for commands such as Edit or Archive, not for choosing a form value like Select and not for arbitrary rich content like Popover.

Dropdown menu

Technical details

Behaviors

Toggle on activation
Activating the trigger opens the surface, and activating it again can close it.
Dismiss outside
A pointer press outside the noncritical surface dismisses it without committing an action.
Dismiss with Escape
Escape closes the temporary surface and returns focus to a sensible control.

States

Popover closed
Popover closed
Popover open
Popover open

State transitions

Popover closed → Popover open
The trigger is activated with pointer, touch, Enter, or Space.
Popover open → Popover closed
Close is activated, Escape is pressed, or an allowed outside interaction occurs.

Test scenarios

Context: A billing table offers a compact explanation of usage-based charges and a link to details.
Mission: Open the explanation, follow its internal focus order, then close it without losing your place.
Primary state: The nonmodal panel opens beside the billing label and its link can be focused.
Edge case: When space is tight, collision handling repositions the panel without covering the trigger or moving focus unexpectedly.

Accessibility

Role: dialog when the content needs a named interactive region
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Focus either remains on the trigger for simple content or moves predictably to the first meaningful control.
Dismissal: Escape, the explicit close control, or a safe outside press closes it and restores focus to the trigger.
Scroll: Page scrolling stays available. The floating surface remains anchored to its trigger or closes when that trigger leaves the viewport.
Announcement: The trigger exposes expanded state and references the popup; a named dialog is announced when that pattern is used.
Keyboard: Enter or Space opens from the trigger
Tab moves through interactive content
Escape closes the popover

Bindings

Popover.Root
implementationKind
radix
nativeElement
Not applicable
ariaPattern
popover
radixPrimitive
Popover
shadcnRecipe
Popover
runtimeDependency
@radix-ui/react-popover@1.1.19
packageName
@radix-ui/react-popover
exportName
Popover.Root
exactVersion
1.1.19
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Radix Popover provides positioning and focus hooks; SkillCodex keeps the surface nonmodal and defines dismissal from the behavior contract.
Verify binding source

Sources

Radix Primitives: Popover
Radix Primitives · documentation · 2026-07-16
Claim covered: Popover: documented Radix Popover parts, focus hooks, positioning, and dismissal behavior.
WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Popover: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.

Turn this concept into a useful prompt

What people describe

Small contextual surfaces

Popover

Invoice detail

Parts of the specimen

Use it when

Avoid it when

Compare similar concepts

Behaviors

States

State transitions

Test scenarios

Accessibility

Bindings

Sources

Popover

Turn this concept into a useful prompt

What people describe

Small contextual surfaces

Popover

Invoice detail

Parts of the specimen

Use it when

Avoid it when

Compare similar concepts

Behaviors

States

State transitions

Test scenarios

Accessibility

Bindings

Sources