Data Display
Forms
Navigation
Tooltip
A popup that appears when an element is hovered or focused, showing a hint for sighted users.
import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipPopup,
TooltipTrigger,
} from "@/components/ui/tooltip";
export default function Particle() {
return (
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Hover me
</TooltipTrigger>
<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
);
}
Installation
pnpm dlx cnippet@latest add tooltip
Usage
import {
Tooltip,
TooltipCreateHandle,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Hover me
</TooltipTrigger>
<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>On This Page