Popover
Floating content panel anchored to a trigger, built on Radix UI.
Installation
npx paubha@latest add popoverUsage
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover";
<Popover>
<PopoverTrigger asChild>
<Button variant="secondary">Open popover</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverTitle>Popover Title</PopoverTitle>
<PopoverDescription>Contextual content goes here.</PopoverDescription>
</PopoverContent>
</Popover>Examples
Sides
With a close button
API reference
PopoverContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | Which side of the trigger to render on. |
| sideOffset | number | 8 | Distance in pixels from the trigger. |
Popover, PopoverTrigger, PopoverAnchor, and PopoverClose pass their props straight through to the underlying Radix UI Popover primitives.
Related components
- Tooltip: for simple hover hints
- Dropdown Menu: for action lists
- Modal: for complex interactions
Accessibility
Accessibility
Role. Content has an implicit
role="dialog"; the trigger getsaria-haspopup="dialog"andaria-expandedautomatically.Focus. Focus moves into the popover on open and returns to the trigger on close. The popover is non-modal by default; pass
modaltoPopoverto trap Tab inside it. When the panel itself holds keyboard focus it shows a 2px focus-ring border.Keyboard. Escape or a click outside closes the popover.