Popover
popoverAnchors interactive contextual content to a trigger without leaving the page.
Usage
Basic usage
Click the trigger to pop up the floating layer, click outside or Esc to close; with title + description + operation area.
<Popover>
<PopoverTrigger render={<Button>Open elastic layer</Button>} />
<PopoverContent title="Hulian elastic layer" description="Click outside or Esc to close.">
<div className="flex justify-end gap-2">
<PopoverClose render={<Button variant="ghost">Cancel</Button>} />
<PopoverClose render={<Button>OK</Button>} />
</div>
</PopoverContent>
</Popover>Pop-up direction
side controls the orientation relative to the trigger (top / right / bottom / left), and the arrow automatically points to the trigger.
<>
<Popover>
<PopoverTrigger render={<Button>Bounce up</Button>} />
<PopoverContent side="top" title="Bounce up" description="side=\"top\"." />
</Popover>
<Popover>
<PopoverTrigger render={<Button>Bounce right</Button>} />
<PopoverContent side="right" title="Bounce right" description="side=\"right\"." />
</Popover>
</>Alignment
align controls edge alignment (start / center / end), and works with side to fine-tune the floating layer placement point.
<Popover>
<PopoverTrigger render={<Button>Align bottom left</Button>} />
<PopoverContent side="bottom" align="start" title="Left justified" description="align=\"start\"." />
</Popover>When to use
Use Popover for a lightweight click-triggered surface containing a title, description, a few actions, or a compact form. It closes on outside interaction or Escape. Use Tooltip for short hover text, HoverCard for rich hover content, or Dialog for a modal flow with an overlay and focus trap.
Import
import { Popover, PopoverTrigger, PopoverClose, PopoverContent } from "@hulianui/ui"Props
PopoverContent:
| Name | Type | Default | Description |
|---|---|---|---|
| side | "top"|"right"|"bottom"|"left" | "bottom" | Preferred popup side. |
| align | "start"|"center"|"end" | "center" | Alignment along the trigger. |
| sideOffset | number | 8 | Distance from the trigger in pixels. |
| className | string | — | Additional class name. |
Slots
PopoverContent:
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Title. |
| description | ReactNode | Supporting copy. |
| children | ReactNode | Body and actions. |
PopoverTrigger and PopoverClose use render to supply custom trigger or close elements, for example render={<Button>…</Button>}.
Example
<Popover>
<PopoverTrigger render={<Button>Open popover</Button>} />
<PopoverContent side="bottom" align="center" title="Confirm action" description="Click outside or press Escape to close.">
<div className="flex justify-end gap-2">
<PopoverClose render={<Button variant="ghost">Cancel</Button>} />
<PopoverClose render={<Button>Confirm</Button>} />
</div>
</PopoverContent>
</Popover>Usage guidelines
- Inject trigger and close elements through
render. Do not nest another interactive element inside PopoverTrigger, which can create<button>inside<button>. - Combining hover opening with focus closing on a focus-managing popover can flicker: opening moves focus inside, blur closes it, and restored focus reopens it. See [[hovercard-on-focus-managing-popover-flickers-set-initial-final-focus-false]]. If adapting this component to hover behavior, set
initialFocusandfinalFocusto false.
Related
Playground
<Popover>
<PopoverTrigger render={<Button>Open elastic layer</Button>} />
<PopoverContent side="bottom" align="center" title="Hulian elastic layer">
{/* Content + <PopoverClose/> */}
</PopoverContent>
</Popover>