Tooltips

Usage and anatomy

Tooltip provides brief contextual information when a user hovers or focuses a trigger. Use <Tooltip.Trigger /> with a single interactive child and compose the message inside <Tooltip.Content />.

import * as Button from "@acme/ui/button"
import * as Tooltip from "@acme/ui/tooltip"

<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <Button.Root>
      <Button.Label>Hover me</Button.Label>
    </Button.Root>
  </Tooltip.Trigger>
  <Tooltip.Content>
    <Tooltip.Title>Keyboard shortcut</Tooltip.Title>
    <Tooltip.Description>Press ⌘K to open search.</Tooltip.Description>
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>

• Wrap the application once with TooltipProvider so timing behavior is shared consistently.
• Use Tooltip.Title for the primary message and Tooltip.Description only when extra context is necessary.
• Do not place essential instructions or interactive controls exclusively inside a tooltip.

API reference

Tooltip.Root and Tooltip.Content

Tooltip.Root, Trigger, Content, and Arrow accept the corresponding Radix Tooltip props. Tooltip.Title and Tooltip.Description accept native p props.