Components
Popover
Floating content panel anchored to a trigger, built on Radix UI.
Installation
npx asteria-ui 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 to the first focusable element on open and returns to the trigger on close; Tab traps focus within the popover while open.
Keyboard. Escape closes the popover.