Tooltip
A small popup that surfaces helpful text when hovering or focusing on an element.
Loading...
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipPopup, TooltipTrigger } from "@/components/ui/tooltip";
export default function TooltipDemo() {
return (
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Hover
</TooltipTrigger>
<TooltipPopup>Add to library</TooltipPopup>
</Tooltip>
);
}Installation
Usage
import {
Tooltip,
TooltipTrigger,
TooltipPopup,
} from "@/components/ui/tooltip";<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipPopup>Tooltip content</TooltipPopup>
</Tooltip>