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!

"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;
  • Accessible by keyboard and screen readers
  • Follows WAI-ARIA tooltip pattern
  • Appears on hover or focus
  • Automatically positions itself
  • Dismissable with Escape key

Import all parts of the component and piece them together

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>
  );
}

The wrapper component that provides context for the tooltip.

PropTypeDefault

defaultOpen

boolean

false

open

boolean

--

onOpenChange

function--

delayDuration

number700

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

PropTypeDefault

asChild

boolean

false

Content

The content displayed inside the tooltip.

PropTypeDefault

side

enum

top

sideOffset

number5

align

enum

center

alignOffset

number0

avoidCollisions

boolean

true

className

string--

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

Edit this page on GitHub