Feedback
Tooltip
Tooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover.
Position (Top/Bottom/Left/Right) — 4 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.3.0-beta
Known open questions
- Arrow pointer position remains a fixed Figma approximation — not dynamically bound to label width.
Live preview
Concise supplementary labels for triggers with keyboard and pointer support.
Hover / Focus / Placements
Keyboard and dismissal
Tab to a trigger to open its tooltip on focus. Press Escape to dismiss. Tooltips do not move focus and must not contain essential instructions unavailable elsewhere.
Purpose
A small floating label providing brief supplementary context for an element, shown on hover or focus.
Anatomy
Tooltip = trigger + floating label associated with aria-describedby.
Variants and states
top · right · bottom · left
When to use
Clarifying an icon-only control's purpose.
When not to use
Content essential to completing a task. Richer content with multiple pieces of information — use Popover.
Accessibility
Must appear on keyboard focus, not just mouse hover; use aria-describedby.
Keyboard behavior
Opens on trigger focus. Escape closes. Tooltip does not receive focus.
Common mistakes
Implementing hover-only triggering with no keyboard-focus equivalent.
Properties
Position as variants, each with a correctly oriented arrow pointer. Label (text).
What is the difference between Tooltip and Popover?
Tooltip holds one concise string. Popover supports richer content and intentional interaction.
Why should essential information not appear only in Tooltip?
Touch users and many assistive technology workflows cannot rely on hover-only discovery.
Tokens used
color/neutral/900
Known limitation
The arrow's position is a fixed coordinate calculated from placeholder text width — not dynamically bound to Label length.
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| content | React.ReactNode | — | Tooltip label. |
| placement | "top" | "right" | "bottom" | "left" | "top" | Preferred placement. |
| openDelay | number | — | Open delay in ms. |
| closeDelay | number | — | Close delay in ms. |
React example
Copy React example
"use client";
import { Tooltip } from "@/components/ui/Tooltip";
import { Button } from "@/components/ui/Button";
export function Example() {
return (
<Tooltip content="Save changes">
<Button aria-label="Save">💾</Button>
</Tooltip>
);
}