Popover - Keep React
Table of Contents#
- Default Popover
- One Paragraph Popover
- Single Line Popover
- Trigger Variant Popover
- Popover Position
- API Reference
- Reference
Default Popover#
The Default Popover demonstrates a basic popover component.
One Paragraph Popover#
The One Paragraph Popover showcases a popover with a single paragraph of text.
Single Line Popover#
The Single Line Popover displays a popover with content confined to a single line.
Trigger Variant Popover#
The Trigger Variant Popover exhibits different trigger interactions for the popover. There are two variants of trigger interactions such as trigger='click' and trigger='hover'.
Popover Position#
The Popover Position component demonstrates various popover positions relative to the trigger element. There are lots of position for popover. Please see the API Reference sections to apply the position.
API Reference#
Explore the available props for the Popover component
| Property | Description | Type | Default |
|---|---|---|---|
| trigger | Defines the interaction trigger for the popover. | hover click | click |
| children | Content that triggers the popover when interacted with. | ReactNode | Button |
| additionalContent | Additional content to be displayed within the popover. | ReactNode | None |
| title | Title or heading for the popover content. | string | Popover Title |
| description | Additional text description for the popover content. | string | Description |
| icon | Icon to be displayed within the popover. | ReactNode | Xcricle |
| customClass | Custom CSS class for styling the popover. | string | None |
| position | Defines the position of the popover relative to the trigger element. | top top-end top-start bottom bottom-end bottom-start left left-end left-start right right-end right-start | bottom-start |
Reference#
To learn more about the Floating-UI, please see the documentation of Floating-UI