build69
build69  /  Components  /  Feedback & Status  /  Tooltip

Tooltip

v1.0.5Updated 4 Oct 2026

Hover / focus hint floating above an element (Radix). Adds rich content support, a keyboard-shortcut hint slot (Kbd), tonal variants, and an interactive (hover-stay) mode that keeps the tooltip open when hovered.

View source← Back to catalog

Preview

Live · 15 stories
DefaultOpen ↗
▸Why this is recommendedtooltiphinthoverkbd+2

The default, out-of-the-box Tooltip.

Recommended for+14
  • ✓Icon button labels
  • ✓Truncated text hints
  • ✓Keyboard shortcut display
  • ✓Icon buttons with shortcut hints
  • ✓Help bubbles with rich content
  • ✓Tonal context messages
Tags+6
tooltiphinthoverkbdrichdefault
Features+4
  • Configurable delay
  • Positioning
  • Disabled on touch by default
  • Rich body content (paragraphs, lists, code)
  • Keyboard-shortcut hint slot using Kbd
  • Tonal variants
  • Interactive mode keeps tooltip open on hover
  • Configurable max-width + clamping
  • Arrow toggle
Not recommended for−2
  • ✕Important info — invisible to touch users (put it in the UI)
  • ✕Modals (use Dialog)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Tooltip" })

Usage

import { Tooltip } from '@/components/feedback/tooltip';

<Tooltip content="Send invoice" kbd={['mod', 'enter']}>
  <Button>Send</Button>
</Tooltip>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
content

Tooltip body. WARNING: this renders on an INVERTED surface (bg-foreground/text-background), so markup styled with theme colour tokens goes invisible — text-foreground and text-muted-foreground paint dark-on-dark, and Badge tones do too. Use weight and opacity for hierarchy, draw chips from `current`, and see the Tooltip caveats from get_component. MCP feedback fb_24359912.

React.ReactNode—
tone

Tone colour

'default' | 'info' | 'success' | 'warning' | 'destructive'—
interactive

Stay open when hovered

boolean—
kbd

Keyboard shortcut keys

string[]—
arrow

Show pointer arrow

boolean—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files