Skip to main content
Hennepin County Design System


Under review

We are in the process of reviewing this component, content, or guidance to make improvements

Use a tooltip to specify extra information about an element. The tooltip appears when the user mouses over an element, or the element receives focus.

Always make tooltips visible within a user's viewport on all screen sizes. The position of the tooltip should adapt to different screen sizes so it's always visible.



When to use

  • Use when the information may be unfamiliar to some users.
  • Use if extra context is needed to what may seem like an unusual request. Such as "Your email address will be used to confirm your request."

When not to use

  • Don’t use tooltips for information that is vital to the user to complete a task. For example, instructions for creating a secure password should not be hidden within a tooltip.
  • Avoid redundant text that is not helpful to the user.
Open all

  • Accessible role: You need to add role="tooltip" to the tooltip container.
  • Accessible ARIA attributes: Be sure to add aria-describedby="...", referencing the tooltip container. If the tooltip is visually hidden you must include aria-hidden="true.". Once the tooltip is visible, change the value to false, or remove the attribute.

  • Keep tooltip content brief.
  • Avoid blocking related content.

Open all