components
Popover
A floating surface anchored to a trigger, built on Radix Popover. Unlike a tooltip it opens on tap and can hold interactive content, so it works for filter panels and supplementary info on touch. The surface fits within a phone width and keeps its close affordance reachable.
Basic
A button opens a panel with a short note and a small control inside.
Info trigger
An icon button can carry a definition or aside that a tooltip cannot hold on touch.
Sides
Anchor the surface on any edge of the trigger with the side prop.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | none | Element that opens the popover. Rendered with asChild. |
| children | ReactNode | none | Floating surface content. |
| title | string | none | Optional heading with a close button. |
| side | "top" | "right" | "bottom" | "left" | "bottom" | Edge of the trigger to anchor to. |
| align | "start" | "center" | "end" | "center" | Alignment along the side. |
| sideOffset | number | 8 | Gap between trigger and surface. |
| open | boolean | none | Controlled open state. |
| onOpenChange | (open: boolean) => void | none | Open-state change handler. |