Tooltip

Use a tooltip as a way for users to see more information before they select an element, go to a new page, or trigger an action on the page.

A tooltip and Popover provide more information in context for users. However, they are different in the following ways.

• A tooltip is used for simple communication purposes while a popover is more descriptive
• Content in a tooltip is generally shorter while content in a popover can be longer and include a heading, images, or links
• A tooltip is triggered on hover (or a tap on mobile devices) while a popover is triggered by a click

Content in a tooltip is limited to text only. Consider the following when writing tooltip content.

A tooltip's body text should be short and descriptive.

The correct orientation of a tooltip depends on the amount of content and browser window. If a tooltip covers up important information or gets cut off, choose a different orientation.

When a cursor or focus is moved, the tooltip disappears. On mobile devices, users must tap to trigger a tooltip and then tap again to make it disappear.

A tooltip can generally be used on both large and small breakpoints if the content is not too long.

Use the tooltip that corresponds with the theme of the container it’s in.

Do not use a dark theme tooltip in light theme environments and vice versa.

Place the tooltip so that the whole element is visible.

A tooltip should not be cut off by the browser window. Change the orientation if it does.

Tooltips should be used if a user might need to know more information to understand the page or to complete an action.

Do not add a tooltip to interface elements or actions that do not require further explanation.