Popover

A floating panel anchored to a trigger element, used to display rich content like forms, menus, or additional information.

View Source

#Installation

npx @dinachi/cli@latest add popover

#Usage

tsx

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverPositioner,
  PopoverPopup,
  PopoverArrow,
  PopoverViewport,
  PopoverTitle,
  PopoverDescription,
  PopoverClose,
  PopoverPortal,
  PopoverBackdrop,
  createPopoverHandle,
} from '@/components/ui/popover'

#Examples

#API Reference

Prop	Type	Default	Description
Popover.open	boolean	—	The controlled open state of the popover.
Popover.defaultOpen	boolean	false	The initial open state when uncontrolled.
Popover.onOpenChange	(open: boolean, event: Event) => void	—	Callback fired when the open state changes.
Popover.modal	boolean \| 'trap-focus'	false	Whether the popover is modal. When true, interaction outside is blocked.
Popover.onOpenChangeComplete	(open: boolean) => void	—	Callback fired when open/close animation completes.
PopoverTrigger.openOnHover	boolean	false	Opens the popover on hover instead of click.
PopoverTrigger.delay	number	300	Milliseconds to wait before opening on hover.
PopoverTrigger.closeDelay	number	0	Milliseconds to wait before closing on unhover.
PopoverContent.portal	boolean	true	Whether to render in a portal. Set to false inside Dialog or Drawer.
PopoverContent.side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Preferred side for the popover popup.
PopoverContent.align	'start' \| 'center' \| 'end'	'center'	Preferred alignment relative to the trigger.
PopoverContent.sideOffset	number	8	Distance in pixels between trigger and popup.
PopoverContent.alignOffset	number	—	Additional offset along the alignment axis in pixels.
PopoverContent.collisionPadding	number	5	Minimum distance from viewport edge before repositioning.
PopoverContent.sticky	boolean	false	Keep the popover visible when the anchor scrolls out of view.