Tooltip

A Tooltip is a floating, non-actionable text label that provides explanations or contextual help about a user interface element. It appears on hover, focus, or touch, offering additional, helpful, and nonessential brief messages to clarify the element’s function.

  • Accessible, keyboard support

  • Multiple variants

  • Animated with Motion

  • Respects reduce motion with system settings and through props

Pure UI

Installation

Loading...

Usage

<Tooltip>
  <TooltipTrigger />
  <TooltipContent />
</Tooltip>

Examples

Contrast

With Toggle

Due to Radix UI limitations, a workaround is needed to make Tooltip work with Toggle

You need to create a container and use asChild on the TooltipTrigger to prevent a nested <button> from being rendered and to avoid conflicts with the data-state attribute.

Read more about the issue here

Motion

Motion presets are origin aware. Use align and side props for additional motion precision.

Reduce Motion

API Reference

Tooltip

PropTypeDefault
variant
enum
"default"
reduceMotion
boolean
false
animation
AnimationProps
―
animationPreset
enum
"motion-blur"
transition
Transition
―
transitionPreset
enumTransitionPreset
"inOutQuad"

Support all Root Radix API

TooltipTrigger

Support all Trigger Radix API

TooltipContent

Support all Content Radix API

PrevToggle Group
Next Avatar