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.

Hello Tooltip. Hover Me!

React
"use client"

import Card from "@radui/ui/Card"
import Tooltip from "@radui/ui/Tooltip"
import Text from "@radui/ui/Text"

const TooltipExample1 = () => {
    return (
        <Tooltip.Root>
            <Tooltip.Trigger asChild>
                <Card className="bg-gray-50" style={{ display: "flex", gap: 20 }}>
                    <Text className="text-gray-950">Hello Tooltip. Hover Me!</Text>
                </Card>
            </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

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.