Tooltip

Usage

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.

Tooltip vs. popover

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

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

Character count

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

Element	Character count
Body	60

Orientation

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.

Behavior

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.

Responsive design

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

Best practices

White on white

Do not use a dark theme tooltip in light theme environments.

Cut off by browser window

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

Unnecessary pairing

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