Hover and focus tooltips (dark one-liners or light rich cards) and click-to-open toggletips for help.
Tooltip labels a control on hover and focus after a short delay; it can show a keyboard shortcut and only appear when text is truncated. Toggletip is an info button that opens a small panel on click, for help text people need to read.
Installation
npx shadcn@latest add KezLahd/rime/tooltipAlso installs: base, icon.
Usage
import { Toggletip, Tooltip } from "@/components/ui";
<Tooltip content="Print invoice"><IconButton label="Print" icon={<IconPrinter size={17} />} /></Tooltip>Examples
Open
inline shows the bubble and the toggletip panel open beside their triggers, in place.
Print invoice
SeatsEach plan includes five seats. Add more from Billing.
Seats. Each plan includes five seats. Add more from Billing.Tooltip and toggletip
Print invoice
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
| contentRequired | ReactNode | Supplementary text only. Never the sole label of a control, never the only place essential information lives. | |
| title | ReactNode | Makes it a rich tooltip: a bold first line above the content. | |
| footer | ReactNode | Rich tooltip: a quiet line under a hairline (a source, a caveat). Not interactive: use Toggletip for a link. | |
| shortcut | ReadonlyArray<string> | Keys shown as badges after the content, e.g. ["Ctrl", "K"]. Also sets aria-keyshortcuts on the trigger. | |
| childrenRequired | ReactElement<TriggerProps> | One focusable element (a button, a link). Its handlers are preserved. A disabled button fires no pointer or focus events: wrap it in TooltipTarget. | |
| side | TooltipSide | "top" | Preferred side. Flips to the opposite side when there is no room. |
| delay | number | 400 | Hover delay in ms. Focus shows at once; so does hover within 400 ms of another tooltip closing. |
| tone | "dark" | "light" | dark (default for plain) or light (default for rich). | |
| maxWidth | number | Default 240 plain, 300 rich. | |
| onlyWhenTruncated | boolean | false | Only open when the trigger's text is clipped (an ellipsised cell). The text is already in the DOM, so no aria-describedby is added. |
| disabled | boolean | false | Switch the tooltip off without unwrapping the trigger. |
| inline | boolean | false | Show the bubble open, in place beside its trigger: no portal, no listeners. For docs and thumbnails. |
Toggletip
| Prop | Type | Default | Description |
|---|---|---|---|
| labelRequired | string | The (i) button's accessible name: "Why we ask for a billing address". | |
| title | ReactNode | ||
| childrenRequired | ReactNode | ||
| footer | ReactNode | May hold a link: a toggletip is interactive, a tooltip is not. | |
| side | TooltipSide | "top" | |
| maxWidth | number | 300 | |
| icon | ReactNode | ||
| className | string | ||
| inline | boolean | false | Show the panel open, in place beside the button: no portal, no listeners. For docs and thumbnails. |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --arrow | 50% | … |
| --r-flat | 2px | … |
| --tooltip-bg | var(--brand-deep) | … |
| --tooltip-radius | var(--r-sm) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --border-w | tokens.css | … |
| --brand-deep | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --dur-fast | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --focus-color | tokens.css | … |
| --focus-ring | tokens.css | … |
| --font-body | tokens.css | … |
| --font-mono | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-inverse | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line | tokens.css | … |
| --line-brand | tokens.css | … |
| --line-input | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-full | tokens.css | … |
| --r-md | tokens.css | … |
| --r-sm | tokens.css | … |
| --r-xs | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-white | tokens.css | … |
| --shadow-float | tokens.css | … |
| --shadow-menu | tokens.css | … |
| --shadow-specular-dark | tokens.css | … |
| --surface-solid | tokens.css | … |
| --surface-sunken | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-micro | tokens.css | … |
| --wash-active | tokens.css | … |
| --wash-hover | tokens.css | … |
| --wash-strong | tokens.css | … |
| --z-tooltip | tokens.css | … |
Accessibility
- Tooltip content is the trigger's description (aria-describedby), shown on focus too, dismissed with Esc.
- Toggletip content is announced through a live region when opened.
Do and don't
Do
- Keep tooltips to a few words.
Don't
- Don't put interactive content in a Tooltip; use a Toggletip.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open tooltip.md