source

Tooltip

Contextual hints that appear on hover or focus. Supports placement, intents, sizes, and custom delays.

Size

Show Arrow

Disabled

Placement

Intent

Show Delay (ms)

200

Hide Delay (ms)

100

Label

Loading syntax highlighting...

01 Examples

Formatting Toolbar

The canonical tooltip use case — icon-only buttons paired with keyboard shortcut hints.

Loading syntax highlighting...

Status Dashboard

Color-coded tooltips on icon-only status indicators communicate severity at a glance.

API Gateway

Auth Service

CDN

Database

Loading syntax highlighting...

Truncated Text Reveal

Wrap truncated text with a tooltip to expose the full value on hover or focus.

Q4-roadmap-final-with-stakeholder-feedback-v3.pdf 2.4 MB
design-system-token-migration-notes.md 18 KB
customer-interview-transcripts-jan-2026.zip 14.2 MB

Loading syntax highlighting...

02 Customization

Branded Gradient

Override the tooltip surface with slotClasses for a branded look.

Loading syntax highlighting...

Glass Morphism (unstyled)

Strip all defaults and rebuild with a translucent glass aesthetic.

Loading syntax highlighting...

Terminal / Monospace

A developer-friendly tooltip with monospace font and dark aesthetic.

$ git

Loading syntax highlighting...

03 Accessibility

Built-in ARIA

Uses role="tooltip" with aria-describedby linking the trigger to the tooltip content. A unique ID is generated automatically for each instance.

Keyboard

Tooltips appear on Focus and dismiss with Escape. The tooltip itself is never focusable – it supplements the trigger's accessible description.

Timing

A configurable showDelay (default 200 ms) prevents accidental activation during mouse movement. The hideDelay (default 100 ms) allows users to briefly move away without the tooltip disappearing.

Reduced Motion

The tooltip uses opacity transitions with the system's --blocks-duration-fast token. In reduced motion mode, the transition duration is automatically shortened.

04 API Reference

17 props

17 props 2 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...

llm.txt