ComponentsFeedback
Tooltip
A short hint on hover and keyboard focus, with an optional shortcut.
Theme
Motion
A short hint on hover and keyboard focus, with an optional shortcut.
<Tooltip content="Add item" shortcut="A">
<Button variant="outline" size="icon" aria-label="Add item">
<PlusIcon />
</Button>
</Tooltip>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Tooltip, TooltipProvider } from "junco";
// once, near the root
<TooltipProvider>
<App />
</TooltipProvider>
<Tooltip content="Copy link" shortcut="⌘C">
<Button size="icon" aria-label="Copy link"><CopyIcon /></Button>
</Tooltip>Move between buttons and the tooltips switch instantly, since they share a provider.
Tooltip#contentchildrensidealignshortcutdelayDuration| Prop | Type | Default |
|---|---|---|
contentWhat the tooltip says. Keep it short. | ReactNode | – |
childrenThe trigger. Must be focusable and accept a ref. | ReactElement | – |
sidePreferred side; flips when there's no room. | "top" | "right" | "bottom" | "left" | "top" |
alignAlignment along the side. | "start" | "center" | "end" | "center" |
shortcutA keyboard hint shown after the text. | string | – |
delayDurationOverride the provider's open delay for this tooltip. | number | – |
TooltipProvider#delayDuration| Prop | Type | Default |
|---|---|---|
delayDurationMilliseconds before a tooltip opens on hover. | number | 400 |
| Key | Action |
|---|---|
| Tab | Focusing the trigger opens the tooltip. |
| Esc | Closes the tooltip. |