About
A beautiful tooltip with a lamp/glow effect
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Lamp Tooltip to your project and fits it to your theme.
Code
How Lamp Tooltip is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { 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 };