Our popover component for Tailwind CSS & React is a small overlay of content that is used to demonstrate secondary information of any component when a user clicks it.
See below our simple popover example that you can use in your web project.
import { Popover, Button } from "@material-tailwind/react";
export default function Example() {
return (
<Popover>
<PopoverHandler>
<Button variant="gradient">Show Popover</Button>
</PopoverHandler>
<PopoverContent>
This is a very beautiful popover, show some love.
</PopoverContent>
</Popover>
);
}
The following props are available for the popover component. These are the custom props that come with we've added for the popover component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
open | boolean | Makes the popover open, when popover is controlled | undefined |
handler | function | Change open state for controlled popover | undefined |
placement | Placement | Change popover placement | top |
offset | Offset | Change popover offset from it's handler | 5 |
dismiss | Dismiss | Change dismiss listeners when clicking outside | undefined |
animate | Animate | Change popover animation | undefined |
children | node | Add content for popover | No default value its a required prop. |
The following props are available for the popover handler component. These are the custom props that come with we've added for the popover handler component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
children | node | Add content for popover handler | No default value its a required prop. |
The following props are available for the popover content component. These are the custom props that come with we've added for the popover content component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
className | node | Add custom className for popover content | '' |
children | node | Add content for popover content | No default value its a required prop. |
type placement =
| "top"
| "top-start"
| "top-end"
| "right"
| "right-start"
| "right-end"
| "bottom"
| "bottom-start"
| "bottom-end"
| "left"
| "left-start"
| "left-end";
type offset =
| number
| {
mainAxis?: number;
crossAxis?: number;
alignmentAxis?: number | null;
};
type dismiss = {
enabled?: boolean;
escapeKey?: boolean;
referencePointerDown?: boolean;
outsidePointerDown?: boolean;
ancestorScroll?: boolean;
bubbles?: boolean;
};
type animate = {
mount?: Object;
unmount?: Object;
};