Popover

When To Use

• When you need a temporary floating container to display additional context or interactive controls
• For forms that don't require a full page or modal
• To provide a lightweight interface for auxiliary information
• When you want to display contextual information without disrupting the user's current context
• As an alternative to tooltips when more interactive content is needed

Examples

Basic

A basic popover with a trigger button and content.

With Form

A popover containing a simple form.

With Arrow

A popover with a visual arrow pointing to the trigger.

Custom Positioning

A popover with custom positioning and alignment.

Props

Popover

PopoverTrigger

PopoverContent

PopoverAnchor

Accessibility

The Popover component adheres to the WAI-ARIA Dialog Pattern.

• The popover trigger has aria-expanded set to true or false depending on the popover state.
• When open, the popover content has aria-modal set to true.
• Focus is trapped within the popover when open for keyboard users.
• Escape key dismisses the popover.
• The popover has a close button for accessibility.
• ARIA roles, states, and properties are appropriately applied to ensure screen reader compatibility.