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,
PopoverHandler,
PopoverContent,
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>
);
}You can change the position of the Popover component using the placement prop.
import { Fragment } from "react";
import {
Popover,
PopoverHandler,
PopoverContent,
Button,
} from "@material-tailwind/react";
export default function Example() {
return (
<Fragment>
<div className="mb-3 flex gap-3">
<Popover placement="top">
<PopoverHandler>
<Button variant="gradient">Top</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
<Popover placement="top-start">
<PopoverHandler>
<Button variant="gradient">Top Start</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
<Popover placement="top-end">
<PopoverHandler>
<Button variant="gradient">Top End</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
</div>
<div className="mb-3 flex gap-3">
<Popover placement="right">
<PopoverHandler>
<Button variant="gradient">Right</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
<Popover placement="right-start">
<PopoverHandler>
<Button variant="gradient">Right Start</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
<Popover placement="right-end">
<PopoverHandler>
<Button variant="gradient">Right End</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
</div>
<div className="mb-3 flex gap-3">
<Popover placement="bottom">
<PopoverHandler>
<Button variant="gradient">Bottom</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
<Popover placement="bottom-start">
<PopoverHandler>
<Button variant="gradient">Bottom Start</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
<Popover placement="bottom-end">
<PopoverHandler>
<Button variant="gradient">Bottom End</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
</div>
<div className="flex gap-3">
<Popover placement="left">
<PopoverHandler>
<Button variant="gradient">Left</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
<Popover placement="left-start">
<PopoverHandler>
<Button variant="gradient">Left Start</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
<Popover placement="left-end">
<PopoverHandler>
<Button variant="gradient">Left End</Button>
</PopoverHandler>
<PopoverContent>
<span>This is a very beautiful popover, show some love.</span>
</PopoverContent>
</Popover>
</div>
</Fragment>
);
}You can modify the open/close state animation for Popover component using the animate prop.
import {
Popover,
PopoverHandler,
PopoverContent,
Button,
} from "@material-tailwind/react";
export default function Example() {
return (
<Popover
animate={{
mount: { scale: 1, y: 0 },
unmount: { scale: 0, y: 25 },
}}
>
<PopoverHandler>
<Button variant="gradient">Show Popover</Button>
</PopoverHandler>
<PopoverContent>
This is a very beautiful popover, show some love.
</PopoverContent>
</Popover>
);
}