Orbit

Tooltip

Source

A compound component built on Radix Tooltip. Wrap the tree in TooltipProvider, then compose Tooltip with TooltipTrigger and TooltipContent.

Basic

Use asChild on the trigger to attach the tooltip to your own element. Content renders into a portal.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="secondary">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>Helpful context</TooltipContent>
  </Tooltip>
</TooltipProvider>

Sides

The side prop sets the preferred placement. Radix flips it automatically when there is not enough room.

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

Anatomy

TooltipProvider, Tooltip and TooltipTrigger re-export the Radix primitives unchanged. TooltipContent wraps the Radix content in a portal with default surface styling and a four pixel offset.

delayDuration

numberdefault: 700

Delay in ms before a tooltip opens on hover.

skipDelayDuration

numberdefault: 300

Window in ms during which moving between triggers skips the open delay.

children

ReactNode

The tree that may contain one or more tooltips.

TooltipContent props

Forwarded to the Radix content. The most common props are listed.

side

'top' | 'right' | 'bottom' | 'l…default: 'top'

Preferred side of the trigger to render against.

sideOffset

numberdefault: 4

Distance in px between the trigger and the content.

align

'start' | 'center' | 'end'default: 'center'

Alignment against the trigger along the chosen side.

className

string

Classes merged onto the content surface.

children

ReactNode

Tooltip content.