Tooltip Components

Design lightweight, accessible tooltips that clarify UI without hindering user experience.

Desktop tooltips appear when you hover or focus on an element, with a delay of 150-250 milliseconds. These disappear if you move your mouse away or press the Escape key.

Keep concise (≤2 lines). Avoid links and complex content. Minimum width should be 120px.

It’s best to position tooltips at the top or bottom of elements, flipping them when they reach the edges. Maintain a gap of 8-12 pixels between the trigger and the tooltip.

Use role="tooltip" with aria-describedby on trigger. Keep focusable triggers visible.

For mobile devices, inline helper text or info modals are often preferable to tooltips, as they don't block content. If using a tooltip, center it and allow the user to tap outside of it to dismiss.

Frequently asked questions