Popover
Rich floating content anchored to its child. Unlike
Tooltip, the content is interactive. Uncontrolled by default;
control it with open + onOpenChange.
import { Popover } from '@gg-software/ui';
<Popover content={<FilterForm />} placement="bottom-start">
<Button>Filters</Button>
</Popover>
<Popover content="Shown on hover" trigger="hover" placement="right">
<Button variant="text">Hover me</Button>
</Popover>
// controlled
<Popover content={…} open={open} onOpenChange={setOpen}>
<Button>Toggle</Button>
</Popover>Props
| Prop | Type | Default | Description |
|---|---|---|---|
content* | ReactNode | — | |
children* | ReactNode | — | content rendered inside the component |
placement | "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | bottom | |
trigger | "click" | "hover" | click | |
open | boolean | — | |
defaultOpen | boolean | false | |
onOpenChange | ((open: boolean) => void) | — | |
className | string | — |
* required · generated from packages/ui/src/containers/Popover/Popover.tsx