Tooltip

Usage

<Tooltip>
  <TooltipTrigger asChild>
    <Button
      aria-label="Copy hex"
      emphasis="soft"
      icon={Copy}
      size="icon-base"
      tone="neutral"
    />
  </TooltipTrigger>
  <TooltipContent>Copy hex · #E8E4DA</TooltipContent>
</Tooltip>

Best practices

• Keep TooltipContent a short, non-interactive label — no buttons or links inside; for rich or actionable hover content use HoverCard.

• The trigger must be genuinely focusable (a button / link, or asChild onto one) or keyboard and AT users never see the tip.

• Share one TooltipProvider to tune delayDuration / skip-delay for a group; Tooltip wraps its own provider, so you only need it for grouping.

Props

Composition