overlays / stable

Tooltip

Short hint for an icon-only control, optionally with its keyboard shortcut.

LIVE PREVIEW

Loading preview…

When to use

Naming icon-only buttons.
Teaching a keyboard shortcut next to the control.

Consider an alternative

Essential information or anything interactive — tooltips don't exist on touch; use Popover.
Long explanations — use helper text.

Import

import { Tooltip } from '@revido-llc/kit';

Keyboard interaction

Focus the trigger — open immediately
Escape — close

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


children (required)	ReactNode	—	One trigger: Kit control, clipped text, native link, or a link component forwarding DOM props/ref.
content (required)	ReactNode	—	Short label shown in the tooltip.
className	string	—
closeDelay	number	0	Delay before closing, ms. Default 0.
defaultOpen	boolean	—
delay	number	500	Hover delay before opening, ms. Default 500 (keyboard focus opens immediately).
isDisabled	boolean	—
isOpen	boolean	—
onOpenChange	((isOpen: boolean) => void)	—
placement	Placement	"top"	Default `top`.
shortcut	string \| string[]	—	Keyboard shortcut rendered as keys after the label, e.g. `["⌘", "K"]` or `"E"`.

Examples

Icon buttons

Opens after 500ms of hover, instantly on keyboard focus.

<Tooltip content="Search" shortcut={["⌘", "K"]}>
  <Button variant="ghost" size="icon" aria-label="Search"><Search /></Button>
</Tooltip>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<Tooltip content="Open draft"><Button>Open</Button></Tooltip>

Clipped text and links

Text becomes focusable without an action role. Native or router links must forward DOM props and their ref.

<Tooltip content={document.title}><span className="max-w-48 truncate">{document.title}</span></Tooltip>
<Tooltip content="Open document"><Link href={href}>{document.title}</Link></Tooltip>