Components
Loading preview...
Displays brief, contextual information when hovering over or focusing on an element, improving clarity without cluttering the interface.
npx shadcn@latest add https://21st.dev/r/sean0205/tooltipimport { Button } from '@/components/ui/button-1';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Info } from 'lucide-react';
export default function TooltipDemo() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">
<Info className="h-4 w-4" />
Default tooltip
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Get detailed information about this feature.</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}