Components
Loading preview...
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/tooltipimport {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button"
export default function DemoOne() {
return (
<>
<TooltipProvider>
<div className="flex gap-4 flex-wrap items-center">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="default">Dark tooltip</Button>
</TooltipTrigger>
<TooltipContent variant="dark">
<p>Dark variant tooltip</p>
</TooltipContent>
</Tooltip>
</div>
</TooltipProvider>
</>
);
}