Tooltip

The purpose of a tooltip is to provide context and explain the function of a user interface element or feature. The content of a tooltip is limited to styled text. If more cutomization is necessary, consider the Dialog component which builds on the patterns of the tooltip.

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
appearance
basic | accent
visual style (from Tooltip.appearances)
basic
innerRef
DOM element => ()
react ref callback
tailPosition
topLeft | topCenter | topRight | bottomLeft | bottomCenter | bottomRight
positions a tail pointer (from Tooltip.tailPositions)
onClose
Event => ()
displays a close button, triggered on click

Tooltips can appear automatically, or be triggered by hover, focus, tap or click.

Tooltip

Tooltips come in 2 styles. Defaults to basic.

Tooltips can be shown with or without a tail (a directional indicator). To make the tail appear, use a Tooltip.tailPositions option.

Tooltips may be persistent until a user interaction closes them. For a close button in the top-right corner of the tooltip, provide a onClose callback.

Tooltips should be written in sentence case.

Bookmark this course
Do
Bookmark This Course
Don't

Write your tooltips to be consice and scannable.

Bookmark this course
Do
Bookmark this course and then you’ll know its safe and sound. This course will enjoy its new company amongst your other bookmarked courses. At first this course might feel shy, but the other bookmarked courses will be friendly and will help this new course get acclimated and comfortable.
Don't

Use accent appearance to gain user attention in cases such onboarding, introducing functionality, asking for input, or prompting action. A good rule of thumb is accent tooltips appear automatically, while basic tooltips appear as a user clicks or hovers to obtain more context.

We’ve added a new way keep track of your content. Bookmark this course to view it later.
Do
Bookmark this course
Don't