Tooltip
Inverted tooltips with keyboard shortcut hints and arrows.
Tooltips name an icon or reveal a shortcut on hover and focus. Cuelark tooltips use an inverted surface for contrast on any background, take a keyboard shortcut hint, and share warm-up delay across a toolbar so moving between buttons feels instant.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/tooltip.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/tooltip.
Builds on: motion
Usage
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
<Tooltip>
<TooltipTrigger asChild><Button size="icon" aria-label="Bold"><BoldIcon /></Button></TooltipTrigger>
<TooltipContent kbd="⌘B">Bold</TooltipContent>
</Tooltip>Examples
Placement
Tooltips on all four sides.
Motion
Springs out of the side it is anchored to with a small overshoot (shared popIn motion).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Tooltip
Extends Radix Tooltip.Root and includes its own provider.
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
| kbd | ReactNode | — | Keyboard shortcut after the label. |
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side. |
| sideOffset | number | 6 | Distance from the trigger in px. |
TooltipProvider
| Prop | Type | Default | Description |
|---|---|---|---|
| delayDuration | number | 150 | Hover delay before opening. |
| skipDelayDuration | number | 300 | Window in which the next tooltip opens instantly. |
Accessibility
- Opens on hover and on keyboard focus, closes on Esc.
- Content is linked to the trigger with aria-describedby.
- Never put essential information or interactive content only in a tooltip.
FAQ
Also searched as: react tooltip · shadcn tooltip · tooltip with shortcut · tailwind tooltip · radix tooltip