Popover
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The Popover component displays rich content in a floating panel anchored to a trigger element. Built on Radix UI, it provides flexible positioning, focus management, and accessibility features. Perfect for tooltips, menus, forms, and contextual information.
Basic Usage
With Form
User Profile Popover
Information Popover
Positioning
Notification Popover
Context Menu Popover
Project Alpha
Last updated 2 hours ago
Properties
Popover
| Property | Type | Description |
|---|---|---|
children | ReactNode | Popover trigger and content components. |
defaultOpen | boolean | Whether the popover is open by default. |
open | boolean | Controlled open state. |
onOpenChange | (open: boolean) => void | Callback when open state changes. |
PopoverTrigger
| Property | Type | Description |
|---|---|---|
asChild | boolean | Render as child element instead of button. |
children | ReactNode | Trigger element content. |
PopoverContent
| Property | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side to render the popover. |
align | "start" | "center" | "end" | "center" | Alignment relative to the trigger. |
sideOffset | number | 4 | Distance from the trigger element. |
alignOffset | number | 0 | Offset along the alignment axis. |
avoidCollisions | boolean | true | Whether to avoid viewport collisions. |
collisionBoundary | Element | Element[] | - | Boundary elements for collision detection. |
sticky | "partial" | "always" | "partial" | Sticky behavior when scrolling. |
hideWhenDetached | boolean | false | Hide when trigger becomes detached. |
className | string | - | Additional CSS classes. |
children | ReactNode | - | Popover content. |
PopoverAnchor
| Property | Type | Description |
|---|---|---|
asChild | boolean | Render as child element. |
children | ReactNode | Anchor element content. |
Accessibility
The Popover component includes comprehensive accessibility features:
- Keyboard Navigation - Full keyboard support with Escape to close
- Focus Management - Automatic focus handling and restoration
- Screen Reader Support - Proper ARIA attributes and announcements
- Portal Rendering - Renders in document body to avoid z-index issues
- Collision Detection - Automatically repositions to stay in viewport
- Dismissible - Closes on outside click and Escape key
Common Use Cases
The Popover component is perfect for:
- Context Menus - Right-click or action menus for items
- User Profiles - Quick profile information and actions
- Notifications - Notification panels and activity feeds
- Forms - Inline editing and quick input forms
- Help & Info - Contextual help and information tooltips
- Settings - Quick settings and preference panels
- Navigation - Dropdown menus and navigation options
Best Practices
- Appropriate Triggers - Use clear, accessible trigger elements
- Content Size - Keep content concise and scannable
- Positioning - Choose appropriate side and alignment for context
- Mobile Considerations - Ensure popovers work well on touch devices
- Focus Management - Test keyboard navigation and focus restoration
- Performance - Avoid heavy content that might cause layout shifts
- Collision Handling - Let the component handle viewport collisions automatically
- Consistent Styling - Maintain consistent popover styling across your app