Popover

Deprecated

Controlled floating panel anchored to a trigger child. 4 placements, outside-click and Escape dismissal, role='dialog' with aria-label. Superseded by tooltip (controlled/interactive mode).

Categorymolecules

Sourcesrc/components/molecules/Popover/Popover.tsx

AI HintControlled component — parent owns open state. Dismisses on outside-click and Escape automatically.

Catalog fallback

Live MDX preview not available for Popover. Showing component catalog metadata instead.

Props

Prop

Type

Required

Default

Description

open

boolean

Required

—

Controlled visibility

onClose

() => void

Required

—

Called on outside-click or Escape

content

React.ReactNode

Required

—

Popover body

placement

'top' | 'right' | 'bottom' | 'left'

Optional

'bottom'

Anchor position relative to the trigger

children

React.ReactElement

Required

—

Trigger element

ariaLabel

string

Optional

—

Accessible name for the dialog

Quick use:<Popover />

Accessibility

ARIA roledialog

Usage

Import

tsxSnippet

import { Popover } from "@epasslive/design-system"

Example 1

tsxSnippet

<Popover open={o} onClose={() => setO(false)} content={<Help/>}><Button>?</Button></Popover>

Anti-patterns

— Do not use for modal-blocking workflows — use Dialog