Popover
A contextual overlay that displays content when a user interacts with a trigger element. Supports click or hover triggers with multiple positioning options.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Popover component
Copy this code to create your Popover component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Events
Popovers can be triggered by different events like click or hover, allowing for flexible user interaction patterns.
Positions
Popovers can be positioned in various directions around the trigger element to best fit your layout needs.
API Reference
The Popover component is built on top of the Radix UI Popover primitive and extends its functionality with additional styling options and features.
Popover.Root
The main container component that manages the popover state.
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
triggerMode | "click""hover" | "click" | Defines how the popover is triggered |
hoverDelay | "number" | "200" | Delay in ms before showing/hiding on hover (when triggerMode is 'hover') |
Popover.Trigger
The element that triggers the popover to open when interacted with.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | "boolean" | "false" | Merges props onto child element |
Popover.Content
The content displayed when the popover is open.
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
showArrow | "boolean" | "true" | Whether to show the arrow indicator |
unstyled | "boolean" | "false" | Removes default styling |
animation | "fade""scale""slide" | "scale" | Animation style when opening/closing |
size | "small""medium""large" | "medium" | Size variant of the popover |
position | "top-left""top-center""top-right""bottom-left""bottom-center""bottom-right""left""right" | "top-center" | Position relative to the trigger |
Popover.Close
A button that closes the popover when clicked.
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
unstyled | "boolean" | "false" | Removes default styling |