Tooltip

stablev0.1.0

Contextual popup that displays informational text when a trigger element is hovered or focused. Built on @radix-ui/react-tooltip for accessible behavior (delay, dismiss on Escape, screen reader announcements). Compound component: wrap content in TooltipProvider > Tooltip > TooltipTrigger + TooltipContent.

Open in Figma Machine contract (Tooltip.meta.ts)

Variants

Placements

Icon trigger (no visible label)

Jargon definition

TLP

Truncated text with full content

This is the complete value for the truncated cell content.

Examples

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>
      Lorem ipsum dolor sit amet
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <button>Action</button>
    </TooltipTrigger>
    <TooltipContent side="right">
      Lorem ipsum dolor sit amet
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Props

Prop	Type
`TooltipContent.content`	`ReactNode — Content displayed inside the tooltip popup (children of TooltipContent)`
`TooltipContent.side`	`"top" \| "right" \| "bottom" \| "left" — Preferred side of the trigger (default: "top")`
`TooltipContent.sideOffset`	`number — Distance in px between trigger and tooltip (default: 8)`
`TooltipProvider.delayDuration`	`number — Ms from pointer enter until tooltip opens (default: 700, set on TooltipProvider)`

Accessibility

2.1 AAWCAG pass

content dark: --text-default-primary (gray-100 #f2f2f3) on --border-elevation-subtle (grayblue-500 #1f3965) = 8.6:1 ✅ content light: --text-default-primary (gray-900 #18191b) on --border-elevation-subtle (gray-200 #cacbce) = 10.2:1 ✅ Keyboard: tooltip opens on trigger focus, closes on Escape. Role=tooltip with aria-describedby on the trigger (handled by Radix).