Popover
Floating panel built on Radix UI. Supports all 4 sides, arrow, and animated open/close.
Live Demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Side of the trigger to render the popover. |
align | 'start' | 'center' | 'end' | 'center' | Alignment of the popover relative to the trigger. |
sideOffset | number | 8 | Distance from the trigger in pixels. |
showArrow | boolean | false | Show an arrow pointing to the trigger. |
Usage
import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from '@ghiberti85/ui'
<Popover>
<PopoverTrigger asChild>
<Button>Open</Button>
</PopoverTrigger>
<PopoverContent side="bottom" align="center" showArrow>
<p>Popover content goes here.</p>
<PopoverClose asChild>
<Button variant="ghost" size="sm">Close</Button>
</PopoverClose>
</PopoverContent>
</Popover>