Popover

Floating content that appears on demand, positioned relative to a trigger element.

Features

• ✅ Smart positioning with auto-flip and shift
• ✅ Optional arrow pointing to trigger
• ✅ Click to open/close or programmatic control
• ✅ Close on outside click or escape key
• ✅ Accessible ARIA attributes
• ✅ Optional focus trap for modal mode
• ✅ Multiple placement options

Basic Usage

Popover Title

This is a basic popover with some contextual information.

With Arrow

Add an arrow that points to the trigger element. The component automatically rotates the arrow tip based on the popover's placement.

Arrow Styling

The arrow tip is automatically rotated based on placement. Simply apply border-t and border-l to create the arrow shape - the rotation is handled for you.

Help & Information

Notice the arrow pointing to the trigger button. This helps establish a visual connection.

Placement Options

Positioned above

Positioned below

Positioned left

Positioned right

Programmatic Control

Control popovers programmatically using custom events with the name prop.

Programmatic Popover

This popover was opened using a custom event.

With Transitions

Smooth Animation

Alpine's transition directives make it easy to add smooth enter/leave animations.

API Reference

Root Props

Property	Type	Default	Description
name	string	-	Unique identifier for programmatic control
open	boolean	false	Initial open state
modal	boolean	false	Enable modal mode with focus trap
closeOnInteractOutside	boolean	true	Close when clicking outside
closeOnEscape	boolean	true	Close when pressing Escape
trapFocus	boolean	false	Enable focus trapping (modal mode)
placement	Placement	'bottom'	Position relative to trigger
offset	number	8	Distance from trigger in pixels

Placement Values

• top, top-start, top-end
• bottom, bottom-start, bottom-end
• left, left-start, left-end
• right, right-start, right-end

Parts

Part	Description
x-popover:trigger	Button that toggles the popover
x-popover:positioner	Positioning wrapper (managed by Floating UI)
x-popover:content	Main popover content container
x-popover:arrow	Optional arrow container element
x-popover:arrow-tip	Optional arrow tip (child of arrow)
x-popover:title	Optional heading element
x-popover:description	Optional description text
x-popover:close-trigger	Button to close the popover

Data Attributes

Attribute	Values	Description
data-state	open | closed	Current popover state
data-scope	popover	Identifies component scope
data-part	Part name	Identifies component part

Keyboard Interactions

Key	Description
Space / Enter	Toggle popover when trigger is focused
Escape	Close popover and return focus to trigger
Tab	Move focus to next focusable element
Shift + Tab	Move focus to previous focusable element

Accessibility

• Follows WAI-ARIA dialog pattern
• Proper role="dialog" on content
• Trigger has aria-haspopup and aria-expanded attributes
• Content linked to title and description via aria-labelledby and aria-describedby
• Focus returns to trigger on close
• Optional focus trap for modal mode