Primitives
Popover
Floating content panel anchored to a trigger element. Supports four positions and both click and hover trigger modes.
Installation
npm install @trinkui/reactImport
import { Popover } from "@trinkui/react";Positions
Hover Trigger
Props
| Prop | Type | Default | Description |
|---|---|---|---|
triggerrequired | ReactNode | — | Element that triggers the popover |
contentrequired | ReactNode | — | Content rendered inside the floating panel |
position | "top" | "bottom" | "left" | "right" | "bottom" | Preferred position relative to the trigger |
triggerOn | "click" | "hover" | "click" | Interaction mode that opens the popover |
className | string | — | Additional CSS classes for the panel |
Accessibility
- Trigger has
aria-expandedandaria-haspopup="dialog". - Panel uses
role="dialog". - Pressing Escape closes the popover and returns focus to the trigger.
- Clicking outside the panel dismisses it.