Tooltip Component

Overview

Tooltip can keep one shared label that moves between controls, resizing to fit each label while the text slides, fades, or rolls in. It can trail the cursor with elastic weight, stretch and tilt with pointer speed, or stay anchored to its trigger.

Use it for controls that need a short explanation but not permanent text, such as icon toolbars, editors, dashboards, and design tools. The label must stay readable and the controls easy to use.

Theme and Interaction Customisation

Set surface style, roundness, side, and offset from the trigger or cursor. Motion options include morphing between triggers, sliding, fading, or rolling content, duration, elastic bounce, stretch and tilt on move, follow speed, entrance animation, and close delay.

Example Production Use Case

A design app toolbar with Share, Edit, Duplicate, and Delete icons can use one shared tooltip that glides between buttons and resizes for each label, with a short close delay to prevent flicker.

A SaaS dashboard can anchor tooltips to compact status icons, explaining what each indicator means without cluttering the layout.

A collapsed navigation rail can show anchored tooltips beside each icon so users identify destinations without expanding the sidebar.

Best Used For

• Creative and editing toolbars.
• SaaS dashboard controls and status icons.
• Developer tools.
• Productivity applications.
• Collapsed navigation rails.
• Design system interfaces.
• Interactive product interfaces with unfamiliar icons.

Not For

Controls that already have clear visible labels don’t need a tooltip repeating them.

Essential instructions, validation errors, or must-read information should stay visible rather than depending on hover.

Longer or interactive content needs Hover Card, Popover, or Dialog, and touch-first interfaces shouldn’t hide key guidance behind hover.

Performance Budget

Track the pointer without app-wide state updates, measure label size only when it changes, and respond instantly to new triggers. Stop tracking and decorative motion when hidden.

Accessibility and Mobile

Use tooltip semantics with aria-describedby, a named trigger, display on keyboard focus, and Escape to dismiss. Keep it open long enough to read and stable across small pointer gaps. On mobile, offer tap or focus access instead of hover and keep it inside the viewport. With reduced motion, simplify following, morphing, stretch, tilt, and bounce.

Common Mistakes

• Putting essential information in a tooltip.
• Placing links or buttons inside it.
• Showing the previous trigger’s text during fast movement.
• Overusing stretch and tilt.
• Letting it clip at viewport edges.
• Closing it before users can read it.
• Making guidance hover-only.
• Using stretch or tilt without Elastic enabled.
• Ignoring reduced-motion preferences.