A cream tooltip with a soft amber glow that springs out of its trigger with a small arrow wobble. Opens after a delay on hover and at once on keyboard focus.
Monstera, living room
Watered 4 days ago
npx shadcn@latest add https://hyperblur.dev/r/tooltip-warm.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/tooltip-warm.tsx.
import { TooltipWarm } from "@/components/hyperblur/tooltip-warm"
<TooltipWarm content="Water now"><button>Water</button></TooltipWarm>| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | What the tooltip says. | |
| children | ReactNode | The trigger. A single element receives aria-describedby while the tooltip is open. | |
| placement | "auto" | "top" | "bottom" | "left" | "right" | "auto" | Preferred side. It flips to the opposite side when there is no room, and auto starts at top. |
| delay | number | 250 | Milliseconds before the tooltip opens on hover. Focus opens it immediately. |
| offset | number | 12 | Gap between the trigger and the tooltip in pixels. |
| accent | string | "#ffa94d" | Color of the glow and the border. |
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the tooltip opens or closes. |