Tooltip

Small hint surface for labels, shortcuts, and extra context.

Installation

Props

Tooltip

Compact hover and focus tooltip with the same Iconiq bubble, arrow, and spring timing layered over Radix UI primitives.

childrenReactElement

Required

A single trigger element that receives hover, focus, and aria-describedby props through a slotted wrapper.

contentstring

Required

Short, non-interactive tooltip copy rendered inside the animated bubble. Use Popover for longer or richer content.

side"top" | "bottom" | "left" | "right"

Default top

Preferred popup side passed into the collision-aware Radix popover positioner.

delaynumber

Default 0.15

Open delay in seconds. The implementation multiplies it by 1000 before scheduling the timer.

classNamestring

Merged onto the tooltip bubble for local surface styling overrides.

Uses Radix Tooltip root and trigger primitives, but keeps the delay timer in component state so hover and focus timing match the core tooltip implementation.

Development builds warn when tooltip content grows beyond a short single-line hint.

Positioning and accessibility

The tooltip is portaled through the selected headless library while preserving the same bubble shell, rotated-square arrow, and collision settings.

Uses Radix Tooltip portal and content primitives for placement while keeping the exact Iconiq tooltip surface and arrow shell.

The trigger receives an aria-describedby link to the active tooltip bubble.

The popup keeps avoidCollisions with collisionPadding=12 and sideOffset=10.

The arrow is still a rotated square whose placement follows the resolved side data attribute.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-tooltip, @radix-ui/react-slot, motion.

Installs a Radix tooltip with the same public content, side, and delay API as the Base UI version.

Preserves the same tooltip bubble classes, rotated-square arrow, controlled delay semantics, and spring timing as the core Iconiq tooltip component.

The generated registry file is /r/r-tooltip.json.