Tooltip

A short label on hover or focus. Never hide essentials in one.

Default

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>Hover me</TooltipTrigger>
    <TooltipContent>Publishes to the web</TooltipContent>
  </Tooltip>
</TooltipProvider>

Side, shortcut & disabled

{/* Side */}
<TooltipContent side="right">Opens on the right</TooltipContent>

{/* With keyboard shortcut */}
<TooltipContent>
  Publish note <kbd className="font-mono text-[10px]">⌘↵</kbd>
</TooltipContent>

{/* Disabled button — wrap in a hoverable span */}
<TooltipTrigger render={<span className="inline-block" tabIndex={0} />}>
  <Button disabled>Merge</Button>
</TooltipTrigger>

Side is set with side="top|right|bottom|left"; the content can carry a keyboard shortcut <kbd>. A disabled button can't receive hover, so the trigger renders a wrapping <span> that stays hoverable.

Delay, align, type & rich content

{/* No delay — provider controls the hover wait */}
<TooltipProvider delay={0}>…</TooltipProvider>

{/* Box align */}
<TooltipContent align="start|center|end">Aligned</TooltipContent>

{/* Custom type — colour the popup with token classes */}
<TooltipContent className="bg-success text-background">Published</TooltipContent>

{/* Other — rich, left-aligned content */}
<TooltipContent className="max-w-56 text-left">
  <span className="block font-medium">buena mono</span>
  <span className="block text-background/70">A fixed 618-unit cell…</span>
</TooltipContent>

No delay is the provider's delay={0} (instant) versus delay={700}. Box align shifts the popup with align="start|center|end". Custom type recolours the popup with bg-success/warning/error token classes. Other holds rich, left-aligned content instead of one centered line.

Markdown for agents: /design/tooltip.md · spec: /design.md