Components
Loading preview...
Enhanced shadcn/ui tooltip
npx shadcn@latest add https://21st.dev/r/originui/tooltipimport { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Globe } from "lucide-react";
function Component() {
return (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="sm">
W/ icon
</Button>
</TooltipTrigger>
<TooltipContent className="dark py-3">
<div className="flex gap-3">
<Globe
className="mt-0.5 shrink-0 opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div className="space-y-1">
<p className="text-[13px] font-medium">Tooltip with title and icon</p>
<p className="text-xs text-muted-foreground">
Tooltips are made to be highly customizable, with features like dynamic placement,
rich content, and a robust API.
</p>
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
export { Component };