Components
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Installation
bunx --bun harukit@latest add tooltipnpx harukit@latest add tooltippnpm dlx harukit@latest add tooltipyarn harukit@latest add tooltipExample
"use client";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
export function TooltipDemo() {
return (
<div className="flex items-center justify-center h-40">
<Tooltip>
<TooltipTrigger>
<button className="px-4 bg-yellow-500 text-white rounded-md hover:bg-yellow-600">
Hover me
</button>
</TooltipTrigger>
<TooltipContent side="top">
This is a tooltip message!
</TooltipContent>
</Tooltip>
</div>
);
}API Reference
Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content inside the Tooltip (usually TooltipTrigger + TooltipContent). |
TooltipTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The element that triggers the tooltip (hover/focus). |
ref | React.Ref<HTMLSpanElement> | - | Optional ref to the trigger element. |
...props | React.HTMLAttributes<HTMLSpanElement> | - | Any additional HTML attributes for the trigger element. |
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content displayed inside the tooltip. |
side | "top" | "bottom" | "left" | "right" | "top" | The preferred side where the tooltip appears relative to the trigger. |
sideOffset | number | 6 | Distance (in px) between the tooltip and the trigger element. |
className | string | - | Additional CSS classes to customize the tooltip styling. |
TooltipProvider
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Wrap your tooltip components inside this provider to share context. |