Component

Tooltips provide additional context or information about an element when users hover or focus on it. They help improve user experience by explaining functionality without cluttering the interface.

View component changelog

preview

React
"use client"

import Button from "@radui/ui/Button"
import Tooltip from "@radui/ui/Tooltip"

// The trigger must be focusable so keyboard users get the tooltip too:
// a Button (or Tooltip.Trigger's own default button) does that for free.
const TooltipExample1 = () => {
    return (
        <Tooltip.Root>
            <Tooltip.Trigger asChild>
                <Button variant="soft">Hover or focus me</Button>
            </Tooltip.Trigger>
            <Tooltip.Content>
                Hello from the tooltip!
            </Tooltip.Content>
        </Tooltip.Root>
    )
}

export default TooltipExample1;

Features

Accessible by keyboard and screen readers
Follows WAI-ARIA tooltip pattern
Appears on hover or focus
Automatically positions itself
Dismissable with Escape key

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Tooltip from "@radui/ui/Tooltip";

export default () => {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger>
        {/* Your trigger element */}
      </Tooltip.Trigger>
      <Tooltip.Content>
        {/* Your tooltip content */}
      </Tooltip.Content>
    </Tooltip.Root>
  );
}

Root

The wrapper component that provides context for the tooltip.

Prop	Type	Default
children	ReactNode	--
placement	enum	top
open	boolean	--
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	--
openDelay	number	0
closeDelay	number	0
customRootClass	string	""

Trigger

The element that triggers the tooltip. Must be an interactive element.

Prop	Type	Default
asChild	boolean	false
children	ReactNode	--

Content

The content displayed inside the tooltip.

Prop	Type	Default
children	ReactNode	--
showArrow	boolean	true
className	string	--

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus to the trigger element.
`Space`	When focus is on the trigger, toggles the tooltip.
`Enter`	When focus is on the trigger, toggles the tooltip.
`Escape`	Dismisses an open tooltip.

ARIA References

Reference	What Rad UI follows
Tooltip pattern	Uses tooltip semantics for contextual information that appears on hover or focus and dismisses with Escape.