Components
Tooltip
A small label that appears on hover or focus.
Tooltip is built on the Base UI Tooltip primitive. It requires a TooltipProvider ancestor, which is included in the Fuma Docs RootProvider.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/tooltip.jsonUsage
"use client";
import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
export default function Example() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline">Hover</Button>} />
<TooltipContent>Tooltip text</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}Examples
Default
Placement
TooltipContent accepts side ("top", "right", "bottom", "left"), align ("start", "center", "end"), sideOffset, and alignOffset props.
Components
| Component | Description |
|---|---|
TooltipProvider | Required ancestor. Controls delay and hover behavior. |
Tooltip | Root container. |
TooltipTrigger | The element that triggers the tooltip. Use render to compose. |
TooltipContent | The popup. Accepts placement props. |
Changelog
- v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
- v0.3.0TooltipProvider now waits 400ms before the first tooltip opens, and tooltips opened right after it appear instantly with no animation.minor
Last updated on