Tooltip

Best Practices

• Associate the tooltip with a focusable element. Tooltip content comes from the aria-label of the tooltipped element, so only tooltip focusable elements (e.g., links and buttons) to ensure that keyboard-only users can access the tooltip.
• Be concise. If you need more than a few words in your tooltip, the content may be important enough to expose directly in the UI rather than in a tooltip.
• Use tooltips sparingly. Tooltips are transient (only showing during hover or focus) and must be discovered (only visible during focus/hover). If your page or feature uses tooltips heavily, consider how successful the design is without them: users may fail to discover the tooltip, or they may find it difficult to remember the content when it's no longer displayed. Can users still complete tasks successfully? Are there ways to clarify the design without using tooltips?
• Be mindful of the screen reader experience Tooltip content comes from the aria-label of the tooltipped element, so any other text within the tooltipped element, such as a button label, is not announced to screen readers - only the tooltip content.

Avoid

• Using tooltips to communicate critical information, such as form guidance or error messages. Tooltips are for additional, supplementary information - not information a user needs to complete a task.
• Repetitive tooltips in the same view. Using the same tooltip content multiple times in the same view may be a symptom of a different design problem. Should you surface that tooltip content in a different way, like a group label or an inline message? Is there a clearer icon you could use for your button?
• Tooltip positions that block related content. Tooltips appear while the tooltipped element is hovered or focused. If the tooltip blocks content your user needs while the tooltip is open, your user has to move the cursor to dismiss the tooltip to access the blocked content.