Tooltip

Usage

Content

Content in a tooltip is limited to text only and should be brief and helpful to a user.

Icon pairing

A tooltip should always be paired with an icon, link, or other small element.

Orientations

A tooltip is available in several orientations depending on the amount of content or available screen space. When choosing an orientation, be mindful of how a tooltip can potentially cover up important content or get cut off by the browser window.

Behavior

How a user interacts with a tooltip depends on what size the screen is.

• On large screens, a tooltip disappears after a user moves their cursor away from the icon.
• On large screens, a tooltip disappears after the focus indicator is moved away from the icon.
• On small screens, a tooltip disappears after a user taps the icon again.

Interaction states

A tooltip appears next to an icon on hover, focus, or when tapped.

Best practices

Accessibility

Do not use a dark theme (white) tooltip on a light environment because it will blend into the background too much.

Orientation

Content within a tooltip should not be cut off by the browser window. Change the tooltip orientation or break the text into multiple lines if it does.

Pairing

Do not add a tooltip to things that do not require further explanation, like obvious links or components.