Components
Loading preview...
A beautiful tooltip with a lamp/glow effect
@fanoflix
npx shadcn@latest add https://21st.dev/r/fanoflix/lamp-tooltipimport { Tooltip, TooltipProvider, TooltipContent, TooltipTrigger } from "@/components/ui/lamp-tooltip"
function LampTooltipDemo() {
return (
<div className="flex flex-wrap gap-10">
{/* Top side tooltip */}
<TooltipProvider delayDuration={50}>
<Tooltip>
<TooltipTrigger className="h-max bg-[#1f1f1f] text-sm font-medium p-1.5 px-3 border">
Hover (Top)
</TooltipTrigger>
<TooltipContent>
<p>Top side tooltip</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{/* Bottom side tooltip */}
<TooltipProvider delayDuration={50}>
<Tooltip>
<TooltipTrigger className="h-max bg-[#1f1f1f] text-sm font-medium p-1.5 px-3 border">
Hover (Bottom)
</TooltipTrigger>
<TooltipContent side="bottom">
<p>Bottom side tooltip</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="flex flex-col gap-10">
{/* Right side tooltip */}
<TooltipProvider delayDuration={50}>
<Tooltip>
<TooltipTrigger className="h-max bg-[#1f1f1f] text-sm font-medium p-1.5 px-3 border">
Hover (Right)
</TooltipTrigger>
<TooltipContent side="right">
<p>Right side tooltip</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{/* Left side tooltip */}
<TooltipProvider delayDuration={50}>
<Tooltip>
<TooltipTrigger className="h-max bg-[#1f1f1f] text-sm font-medium p-1.5 px-3 border">
Hover (Left)
</TooltipTrigger>
<TooltipContent side="left">
<p>Left side tooltip</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
);
}
export { LampTooltipDemo };