Tooltip

An overlay for small amounts of data.

Overview

Tooltips add additional context to a button or other UI element.

Guidelines

Tooltips can only contain a short volume of text.

Do not communicate critical information in a tooltip; think of it as a "Did you know?" prop.

When to use

• When you need to display additional content to give more context to users.

When not to use

• For long-text overlays. Use popover instead.

• As a bandaid on a broken experience.

Content

Tooltip content should follow our content guidelines. Keep them clear and useful.