Popover

Floating card with a title header and rich body content. Supports 12 placements, hover / click / focus triggers, and controlled open state. Unlike Tooltip, the popover overlay is interactive, so users can click links or buttons inside it.

Playground

Title

placement

trigger

arrow

showCloseButton

disabled

<Popover
  title="Popover title"
  content={<span>Popover body content goes here.</span>}
>
  <Button variant="secondary">Click me</Button>
</Popover>

Placements

12 placement options, same as Tooltip.

Trigger modes

Default trigger is 'click'. Also supports 'hover' and 'focus'.

Content only

Omit title for a content-only card without a header.

Close button

showCloseButton adds a × button in the header for explicit dismissal.

Rich content

content accepts any ReactNode: links, buttons, custom JSX.

No arrow

Set arrow={false} to hide the directional pointer.

Controlled

Use open + onOpenChange for full control over visibility.

API

Property	Type	Default	Description
`content`*	`ReactNode`	—	Body content of the popover card.
`title`	`ReactNode`		Header title shown above the content.
`placement`	`"top" \| "topLeft" \| "topRight" \| "bottom" \| "bottomLeft" \| "bottomRight" \| "left" \| "leftTop" \| "leftBottom" \| "right" \| "rightTop" \| "rightBottom"`	"top"	Placement relative to the trigger element.
`trigger`	`"hover" \| "click" \| "focus" \| PopoverTrigger[]`	"click"	How to activate the popover.
`open`	`boolean`		Controlled open state.
`defaultOpen`	`boolean`	false	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`		Called when visibility changes.
`arrow`	`boolean`	true	Show the directional arrow.
`showCloseButton`	`boolean`	false	Show a × button in the header to close the popover.
`mouseEnterDelay`	`number`	100	Delay before showing on hover (ms).
`mouseLeaveDelay`	`number`	100	Delay before hiding on hover (ms).
`disabled`	`boolean`	false	Disable the popover entirely.
`overlayClassName`	`string`		Extra class on the floating overlay.