videorc/uiInfo Tooltip
Explains a chip, a dot or a short status word on hover and on keyboard focus, and keeps the text in the DOM as its description for screen readers.
Installation
$ pnpm dlx shadcn@latest add @videorc/info-tooltipUsage
import { InfoTooltip } from "@/components/ui/info-tooltip";<InfoTooltip content="The disk is full.">
<Badge variant="destructive">MP4 failed</Badge>
</InfoTooltip>Examples
On a control
A control that takes focus itself (a button whose outcome needs a sentence) is the trigger and is described, with no wrapper: pass focusable={false}. A plain hint on a control is a Tooltip; a disabled control's reason is a Disabled reason.
Theming
| Token or attribute | Meaning |
|---|---|
rounded-chip, focus-visible:ring-3 | The wrapper's focus ring, around the chip |
data-slot="info-tooltip" | The focusable wrapper |
data-slot="info-tooltip-text" | The hidden description |
The tooltip itself is the registry's Tooltip.
Keyboard
| Key | Action |
|---|---|
| Tab | Focuses the chip and shows the explanation |
| Esc | Hides it |
Accessibility
A badge isn't focusable, so a title on it never reaches the keyboard or a screen reader. The wrapper is a tab stop, and the explanation stays in the DOM, hidden, as its aria-describedby, not only while the tooltip shows. Base UI's tooltip is visual only, so this description is what a screen reader hears. Pass tabIndex={-1} for a chip in a roving-focus row that isn't the active one. With no content the child renders exactly as it is.
API reference
Prop
Type
Badge
Glass chips for status, tags and counts. A status chip keeps its text monochrome and glows its tone in a dot; failed and on air tint the glass itself.
Disabled Reason
Says why a control is disabled, on hover and on keyboard focus. A focusable wrapper carries the tooltip, and the reason stays the control's description.