Popover
Compound non-modal floating content anchored to a trigger.
Add it to your project
Eject the complete popover group, then import from its generated local barrel. The copied source and CSS belong to your application.
pnpm exec toucan eject popovernpx toucan eject popoverimport { Popover, PopoverContent, PopoverTrigger } from '@/components/toucan/popover';Use when
A trigger needs contextual interactive content without blocking the page.
Avoid when
The content is only a short non-interactive label; use Tooltip.
Example
Popover content can contain any elements.
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Popover
Props type: PopoverProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
anchor | "left" | "right" | "top" | "bottom" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom" | "right-top" | "right-center" | "right-bottom" | 'bottom' | No | The edge or alignment used to position the floating content. |
defaultOpen | boolean | false | No | Initial open state when the component is uncontrolled. |
onOpenChange | (open: boolean) => void | undefined | No | Called when the open state changes. |
open | boolean | undefined | No | Controlled open state. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
PopoverContent
Props type: PopoverContentProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
maxWidth | string | undefined | No | Maximum CSS width of the floating content. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
PopoverTrigger
Props type: PopoverTriggerProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
asChild | boolean | false | No | Merge behavior and accessibility props onto the single child element. |
Also accepts the native button attributes that are not replaced by a Toucan prop.
Type exports
PopoverContentProps, PopoverProps, PopoverTriggerProps
Accessibility
- Trigger state and content are associated.
- Supports outside-click and Escape dismissal with focus return.
Token families
popoverfocus