Skip to main content

Tooltip Guidelines

Tooltips should be used to provide quickly understandable information to users in a non-distracting way. Make sure that the tooltips you add are specific and help the user accomplish their goals faster and with more confidence.

Best Practices​

Tooltips should:

  • Be provided for every element without a label, telling the name of that element. Users should never have to guess what an element means. This includes icons, images, numbers, and charts.
  • Use the "?" icon only if attached to a specific label or element. Free-standing "?" icons tend to be too general.
  • Be specific in context, e.g. "Edit email" instead of "Edit".
  • Use the user's terms instead of technical terms, e.g. "Email preview" instead of "Email client screen".

Try to avoid:

  • Having too many "?" tooltips on a page. Instructions and general feature information should go in the documentation. Instead of adding a tooltip, improve the microcopy or the design.
  • Tooltips longer than about 2 sentences (100–150 characters). Long tooltips may cover important UI elements. Add further information to documentation and provide a link.

Content Guidelines​

Shorten tooltips by:

  • Not mentioning the technical name of the UI element, e.g. use "Email clients" instead of "Email client list".
  • Not repeating what is obvious from the context, e.g. use "Previous" instead of "Previous email client".