Tooltip

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

Installation

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Props

Tooltip

5 props

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"

Defaulttop

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

delaynumber

Default0.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.

Notes

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.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.

reducedMotionboolean

When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.