Tooltip Guidelines

Tooltips should be used to provide quickly understandable information to the 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 labels, telling the name of that element. Users should never have to guess what an element means. This includes icons, images, numbers, charts.
• Use the "?" icon only if attached to a specific label or element. Free standing "?" are bound to be general and won't help users in their specific task.
• Should strive to be specific in the context (e.g. "Edit email" instead "Edit").
• Use the user’s terms instead of technical terms, e.g. instead of “Email client screen” use “Email preview”.

Try to avoid:

• Having too many "?" tooltips on page, there should be a strong reason for every added one. Instructions and general feature information should go the documentation. Instead of adding a tooltip improve the microcopy or the design.
• Tooltips longer than about 2 sentences long (100-150 characters). This length makes it easier for the users to quickly understand what is important, and doesn't force them to interrupt their task by reading long chunks of text. Long tooltips may also cover important UI elements. Add further information to the 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 that is obvious because of the context of the tooltip, e.g. use “Previous” instead of “Previous email client”.