Tooltip

Classic inverted hover/focus tip — dark on light, light on dark. Built on Radix Tooltip. Use it for a short, non-essential label that names or clarifies a control on hover or keyboard focus, most often an icon-only IconButton whose meaning isn't obvious. Keep content to a few words: it is hover-triggered and not reachable on touch, so never put essential information, links, or interactive elements inside. For rich anchored content (forms, multi-line copy, actions) reach for Popover; for persistent inline status use Alert or Badge. One inverted surface only — no tones or sizes; control placement with side and timing with delayDuration (defaults to a snappy 300ms).

Setup

Wrap the app (or the section that owns the tooltips) in <TooltipProvider>. <SidebarProvider> wires one internally, so sidebar icon-rail tooltips work without any extra setup.

Default

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>Copied to clipboard</TooltipContent>
  </Tooltip>
</TooltipProvider>

All four sides

<TooltipContent side="top">Top</TooltipContent>
<TooltipContent side="right">Right</TooltipContent>
<TooltipContent side="bottom">Bottom</TooltipContent>
<TooltipContent side="left">Left</TooltipContent>

On an icon-only control

<Tooltip>
  <TooltipTrigger asChild>
    <IconButton variant="ghost" aria-label="More info"><Info /></IconButton>
  </TooltipTrigger>
  <TooltipContent>Deploys take ~2 minutes on average</TooltipContent>
</Tooltip>

Props

Component	Notable props
TooltipProvider	delayDuration (default 300ms — snappier than Radix's 700ms default), skipDelayDuration, disableHoverableContent
Tooltip	open, defaultOpen, onOpenChange, delayDuration (override Provider per-tooltip)
TooltipTrigger	asChild — wraps your own Button / IconButton / anchor
TooltipContent	side ("top" \| "right" \| "bottom" \| "left"), align, sideOffset (default 6), collisionPadding

Source

packages/react/src/components/tooltip.tsx · adapted from shadcn