Popover
OverlaysA floating panel that appears on click. Use popovers for more complex interactions than tooltips, like forms or additional options.
Import
import { Popover, PopoverContent } from "@/components/ui/popover";Usage
Basic Popover
Simple popover with text content
With Form
Popover containing form inputs
Information Popover
Popover for displaying detailed information
API Reference
trigger*—ReactNodeElement that triggers the popover
children*—ReactNodeContent inside the popover
side"bottom""top" | "bottom" | "left" | "right"Preferred side for the popover
align"center""start" | "center" | "end"Alignment relative to trigger
| Prop | Type | Default | Description |
|---|---|---|---|
trigger* | ReactNode | — | Element that triggers the popover |
children* | ReactNode | — | Content inside the popover |
side | "top" | "bottom" | "left" | "right" | "bottom" | Preferred side for the popover |
align | "start" | "center" | "end" | "center" | Alignment relative to trigger |