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
Demo Coming Soon
Popover examples will be available soon.
# 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