docs / core / hint-popover
HintPopover
a hint that appears on hover, like a tooltip, but with something to click inside it: a dismiss, a read more, a next step. the one you reach for when a plain label is not quite enough. touch opens it on press.
intensity · recedesrsc · client
provenance
shaped from sisu-pluslayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
hangs off a Badge, a stat, a ghost Button that asks a questionaction holds one small dismiss or follow-up Buttonplain text with nothing to click belongs in a Tooltipno forms or multi-step content. that is a Popover or Dialoga11y
opens on keyboard focus, not just hover · panel content is reachable · Escape dismisses and stays dismissed until focus genuinely leavesjest-axedependencies
@base-ui/reactlive demo · try it out
customize
tonetints panel and icon
sideedge the panel hangs off
triggertext of the element it hangs off
titlebold first line, optional
childrenthe explanation
actionadds a dismiss button in the footer
openDelayhover dwell before opening
closeDelaygrace period after the pointer leaves
usage
import { Button } from "@usva-ui/react/primitives/button";
import { HintPopover } from "@usva-ui/react/primitives/hint-popover";
<HintPopover
trigger={<Button variant="ghost">What counts as active?</Button>}
>
A student who has logged in during the last 30 days.
</HintPopover>props
| prop | type | default | notes |
|---|---|---|---|
| trigger | ReactNode | — | the element the hint hangs off. |
| title | ReactNode | — | bold first line. |
| icon | ReactNode | — | glyph beside the text, tinted by tone. |
| action | ReactNode | — | interactive footer, typically a dismiss Button. |
| tone | "neutral" | "accent" | "success" | "warning" | "danger" | "info" | "neutral" | tints the panel and the icon. |
| side | "top" | "right" | "bottom" | "left" | "top" | which edge of the trigger the panel hangs off. |
| openDelay | number | 120 | hover dwell before opening. guards against drive-by pointers. |
| closeDelay | number | 200 | grace period after the pointer leaves, so it can cross the 8px gap into the panel without the action becoming unclickable. |
get it
bun add @usva-ui/reactusage
import { Badge } from "@usva-ui/react/primitives/badge";
import { Button } from "@usva-ui/react/primitives/button";
import { HintPopover } from "@usva-ui/react/primitives/hint-popover";
<HintPopover
tone="warning"
title="Prerequisite not met"
trigger={<Badge tone="warning">2 warnings</Badge>}
action={<Button size="sm" variant="ghost">Dismiss</Button>}
>
MATH-201 must be completed before MATH-305.
</HintPopover>