Tooltip
Short hint shown on hover or focus.
Installation
pnpm dlx shadcn@latest add https://yea-ui.vercel.app/r/tooltip.json
Usage
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="ghost" />}>Hover me</TooltipTrigger>
<TooltipContent>Saved</TooltipContent>
</Tooltip>
</TooltipProvider>Examples
Sides
Position the popup with the side prop.
API reference
TooltipProvider
Shares the open delay between tooltips. Wrap once near the app root.
| Prop | Type | Default | Description |
|---|---|---|---|
delay | number | 300 | Milliseconds before the tooltip opens. |
TooltipTrigger
Use the render prop to attach the tooltip to an existing button.
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "bottom" | Which side of the trigger the popup appears on. |
sideOffset | number | 6 | Gap between trigger and popup in pixels. |
All other props are forwarded to the underlying Base UI component.