TOOLTIP
A tooltip is a short, floating message that provides users with helpful, non-critical context about an element.
WHEN TO USE
Use a tooltip
To provide optional, supplementary information that could be useful to the user.
To give brief definitions of terms or phrases, or offer additional context.
Don’t use a tooltip
When the information is critical for completing a task—such information should be visible on the screen or integrated directly into the user flow.
BEST PRACTICE
Use tooltips only for non-critical information.
Keep the content short and concise.
Avoid placing multiple tooltips on the same screen.
Include a title when defining a term or phrase in the tooltip.
Provide a link to additional content if needed.
PLACEMENT
Tooltips can appear above, below, to the left, or to the right of the button that triggers them.
The tooltip automatically adjusts its placement based on available screen space and its position.
INTERACTION
A tooltip should always be triggered by a button. It appears when the user taps or clicks the button and does not appear on hover.
Once a tooltip is triggered, it stays open until the user dismisses it by clicking anywhere outside of it.
You can include links in the tooltip content, but no other interactive elements.
Triggering a new tooltip immediately closes any other open tooltip.
CONTENT
Content
Content copy should:
—
define a term or phrase, or provide additional context.
—
Only convey non-critical information that not all users need.
—
Primarily use plain text, but links, bold text, bullets, and images are allowed.
—
Avoid other text styles or interactive elements.
—
Keep it concise — ideally 100 characters or fewer, and no more than 250.
This information is not critical and can be shown in a tooltip
This information is critical and should be visible in the main flow
Title (optional)
Do not include a title unless the tooltip is used to define a term or phrase.
Title copy should:
—
Match the term or phrase being defined
—
Use sentence case, unless the term has its own capitalization rules (e.g. ECG)
—
have no full stop
Include a title for definitions.
Don't include a title for other messages.
AVAILABILITY