Tooltip
Hover label with delay and side placement control. Supports rich content including Kbd.
Install
Import path
Examples
Placement
Anchor the tooltip to any side of the trigger.
Disabled Button
Show a tooltip on a disabled button by wrapping it with a span.
With Keyboard Shortcut
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
TooltipProvider, Tooltip, TooltipTrigger, TooltipContent,
} from "@codefast/ui/tooltip";
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>…</TooltipTrigger>
<TooltipContent side="top">…</TooltipContent>
</Tooltip>
</TooltipProvider>
API reference
Props for each part of the component. All native element props are also forwarded.
TooltipProvider
Wrap your app (or a region) once; shares timing across tooltips.
| Prop | Type | Default | Description |
|---|---|---|---|
| delayDuration | number | 700 | Milliseconds to hover before the tooltip opens. |
| skipDelayDuration | number | 300 | Window in which moving between triggers skips the delay. |
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side relative to the trigger. |
| sideOffset | number | 0 | Distance in px between the trigger and the content. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Focusing the trigger opens the tooltip. |
| Esc | Closes the open tooltip. |
- The trigger must be a focusable element — use asChild over a Button or link.
- Tooltips are supplementary: never put essential information or actions inside one.
- Content is linked to the trigger via aria-describedby for screen readers.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Keep tooltip text to a short phrase.
- Use for naming icon-only controls and surfacing shortcuts.
Don’t
- Don’t place interactive controls inside a tooltip — use a Popover.
- Don’t hide information the user needs to complete a task.