Sticker Tooltip
A hover and focus label on Radix Tooltip, with the die-cut edge and a 120ms arrival.
FeedbackClient component@radix-ui/react-tooltip
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-tooltipPulls in @duck/theme. Already installed items are skipped.
Usage
import { StickerTooltip, StickerTooltipProvider, StickerTooltipRoot, StickerTooltipTrigger, StickerTooltipContent } from "@/components/ui/sticker-tooltip"The file lands in components/ui/sticker-tooltip.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| content | React.ReactNode | - | The label. A few words. |
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side. Radix flips it when there is no room. |
| align | "start" | "center" | "end" | "center" | Alignment along that side. |
| arrow | boolean | true | Draw the pointer. |
| delay | number | 250 | Milliseconds of hover before it opens. |
| children | React.ReactNode | - | The control being labelled. Rendered as the trigger, so it must forward props. |
Rules
What keeps this component from turning into noise.
- A tooltip is hover-only chrome: no touch, gone as soon as the pointer leaves. Use it for a label with nowhere else to live — an icon-only control, a truncated value — and never for information the task needs.
- For a keyboard shortcut, print it inline with StickerKbd instead. Every user can see that one.
- The all-in-one StickerTooltip brings its own provider. Compose the parts when a group of controls should share one delay.