Skip to content
Components

Tooltip

Root component for a tooltip. Wraps TooltipProvider automatically.

Usage

@instruments/materia-ui/components/tooltip

<Tooltip>
  <TooltipTrigger
    render={
      <Button
        aria-label="Copy hex"
        emphasis="soft"
        icon={Copy}
        size="icon-base"
        tone="neutral"
      />
    }
  />
  <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 focusable (a button / link, or render onto one) or keyboard and AT users never see the tip.

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

Props

Tooltip

PropTypeDefaultDescription
delaynumber

Delay before showing tooltip in ms. Defaults to 0.

TooltipContent

PropTypeDefaultDescription
classNamestring

Also exports

  • componentTooltipProvider
  • componentTooltipTrigger

Composition

Used by

ProductCard, ProgressDots, Sidebar, SwatchSelector