The Popover is a UI component used to display temporary content that appears around a trigger element. This component can be used to display menus, tooltips, or additional information for users.
import { Popover, Button } from "mogora-ui";
export default function PopoverDemo() {
return (
<Popover>
<Popover.Trigger>
<Button className="px-2">
<EllipsisVertical />
</Button>
</Popover.Trigger>
<Popover.Content>
<div className="p-4">This is a Popover Content</div>
</Popover.Content>
</Popover>
)
}
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Elements to be rendered inside the popover. |
| className | string | Additional classes for styling. |
The trigger component used to display the popover when clicked.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The element that can be clicked to show the popover. |
| className | string | Additional classes for styling. |
The component that contains the displayed popover content.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Content to be displayed inside the popover. |
| className | string | Additional classes for styling. |
| align | "left" | "right" | Determines the alignment of the popover content. |