Hint
A labeled trigger that opens a help bubble, its hit area stretched by a pseudo-element
Installation
pnpm dlx shadcn@latest add @alexandrejoly/hintUsage
import { Hint, HintContent, HintTrigger } from "@/components/ui/hint";<Hint> <HintTrigger> Label <CircleHelpIcon /> </HintTrigger> <HintContent>A short explanation of the label.</HintContent></Hint>Accessibility
The trigger is a button that holds its own label, so its name is the text people see and it needs no aria-label; the icon beside it is decorative. Its hit area reaches 8px past its edges, so even a short label gives a target of at least 24px.
It opens on press, by click, Enter or Space, rather than on hover, so touch and keyboard users reach it too. Focus moves into the bubble, and Escape closes it and returns focus to the trigger, as in any Base UI popover.
Meets WCAG 2.2: 2.5.8 Target Size (Minimum) (opens in a new tab)
API reference
Hint
Holds the open state; it renders no element.
Takes every prop of Base UI Popover.Root (opens in a new tab).
HintTrigger
The button that toggles the hint. Put the label in it, text then icon, so it needs no aria-label; icons are sized to 16px. Its hit area extends 8px past its edges.
Takes every prop of Base UI Popover.Trigger (opens in a new tab).
HintContent
The bubble, portaled to the body.
Takes every prop of shadcn PopoverContent (opens in a new tab).