Popover
A Popover component is a UI element that displays additional information or actions when users interact with a specific trigger, such as a button or link. It typically appears as a small overlay or tooltip that provides context, tips, or options without navigating away from the current page. Popovers enhance user experience by offering relevant content in a concise format while maintaining focus on the main interface.
# Demo
Basic Popovers
Simple popovers with basic content and information.
Popover Sizes
Popovers in different sizes for various content types.
Interactive Popovers
Popovers with interactive content and forms.
Popover Best Practices
Guidelines for effective popover design and implementation.
✅ Do
- • Use appropriate popover sizes for content
- • Provide clear trigger elements
- • Keep content concise and focused
- • Use proper alignment based on context
- • Include interactive elements when needed
- • Ensure popovers are dismissible
❌ Don't
- • Overcrowd popovers with too much content
- • Use popovers for critical information
- • Make popovers too small for their content
- • Nest popovers within other popovers
- • Use popovers on mobile without consideration
- • Forget to handle popover positioning
Popover Action Summary
Track interactions with the popovers above.
Recent Actions
No actions yet
Statistics
Total Actions:0
Cart Items:3
Unread Notifications:2
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| size | PopoverSize | Optional | Size of the popover. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| triggerClassName | string | ' ' | You can customise by passing tailwind classes. |
| trigger | React.ReactElement | Required | Trigger element for the popover. |
| children | React.ReactNode | Required | Popover content. |
| side | 'top' | 'bottom' | 'right' | 'left' | Optional | Side where popover appears. |
| align | 'start' | 'end' | 'center' | Optional | Alignment of the popover. |
| popoverId | string | Optional | ID for the popover. |
| popoverLabel | string | Optional | Label for the popover. |
| triggerProps | React.HTMLAttributes<HTMLElement> | Optional | Props for trigger element. |
| contentProps | React.HTMLAttributes<HTMLDivElement> | Optional | Props for content element. |
# Tags