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;
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.
Prop | Type | Default |
---|---|---|
defaultOpen | boolean | false |
open | boolean | -- |
onOpenChange | function | -- |
delayDuration | number | 700 |
The element that triggers the tooltip. Must be an interactive element.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
The content displayed inside the tooltip.
Prop | Type | Default |
---|---|---|
side | enum | top |
sideOffset | number | 5 |
align | enum | center |
alignOffset | number | 0 |
avoidCollisions | boolean | true |
className | string | -- |
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. |