Tooltip

Classic inverted hover/focus tip — dark on light, light on dark. Built on Radix Tooltip.

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