IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Tooltip

/

Design

Display a brief message on hover.

The tooltip appears when a cursor is positioned over an icon or button. There's only one type, always anchored to the element by a small tail.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Tooltip documentation and examples.

Options

Types

Depending on the context, a tooltip may need to act a specific way. The instructional type allows for more context, while the label clearly states the action performed.

IconInformation

Instruction: Provide further explanation for the actions that need it.

Triggers

IconInformation

Icons: Provide more detail in a visually dense interface where we may not have room for labels.

Position

The tooltip’s position is dictated by the interface design. Avoid hiding other key elements or getting cut off by an edge.

IconInformation

Delay

IconInformation

Mobile

Tooltips should not be used on mobile. Instead, use a note to explain what the user needs to know.

Usage

Hover Required

The tooltip appears on hover by default, but should also be triggered on focus. Tooltips should never appear without a trigger, especially not as onboarding prompts.

Type Treatments

There’s a hard limit of one bold or italicized phrase—not complete sentence—per tooltip. Use it to call out another element (clips, playlists, etc.) or the desired action.

Don't bold an entire tooltip.

Don'tbold an entire tooltip.

Do bold or italicize a single important piece of information.

Dobold or italicize a single important piece of information.

Metadata

Don’t use a tooltip to display metadata, like viewing activity for a specific team member. The content should relate directly to the interface element, not provide new information with zero context.

Don't pack the tooltip with data they may not expect.

Don'tpack the tooltip with data they may not expect.

Do center the content around the trigger itself.

Docenter the content around the trigger itself.

On Links

Because we link the action and/or where a link takes the user, there’s no need to include a tooltip where that same information would be shared. Avoid tooltips on links altogether.

In Forms

Tooltips should not replace help text on form inputs—the help text should communicate exactly what the user is submitting.

Radios and checkboxes, however, can use tooltips to communicate what a user is selecting.

Don't use a tooltip in addition to help text.

Don'tuse a tooltip in addition to help text.

Do help the user understand their decision.

Dohelp the user understand their decision.

Disabled Buttons

Use a tooltip to explain why the button is disabled and provide clear direction for moving forward.

Don't simply say that the button is disabled.

Don'tsimply say that the button is disabled.

Do provide more context around what enables the button.

Doprovide more context around what enables the button.

Instructional vs. Label

The tooltip type is defined by the information it's presenting.

Don't use an informational tooltip to simply name an icon.

Don'tuse an informational tooltip to simply name an icon.

Do use a label when no additional instructions are needed.

Douse a label when no additional instructions are needed.

Don't make the label a complete sentence.

Don'tmake the label a complete sentence.

Do make it a single action and stick to UI label guidelines.

Domake it a single action and stick to UI label guidelines.

Abiding by UI label guidelines also means no icon label should have closing punctuation.

Microcopy

Content Length

Tooltips should be no longer than 110 characters. That comes to four full lines for an effective message.

Don't ramble and take up a quarter of the interface for a quick FYI.

Don'tramble and take up a quarter of the interface for a quick FYI.

Do be as clear and concise as possible.

Dobe as clear and concise as possible.

Be Direct

Tooltips don’t require fun phrases or a full shot of personality, just tell the user exactly what they need to know. Inform them and move on.

Don't go crazy with a casual tone and miss the point.

Don'tgo crazy with a casual tone and miss the point.

Do focus on the most necessary information.

Dofocus on the most necessary information.

Linked Text

A tooltip should never take the user somewhere else—all necessary information should live in the tooltip itself (for the sake of context more than anything). Don’t link the text.

Punctuation

Only periods are allowed in tooltips. We shouldn’t use the limited space to yell with an exclamation or ask questions with no answer.

Don't ask a question when we can't fit an answer.

Don'task a question when we can't fit an answer.

Do use a period to instill confidence in the complete thought.

Douse a period to instill confidence in the complete thought.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconCritical ViolationsIconConfirmation Pass
  • IconCriticalContent disappears if user attempts to mouseover the tooltip.
  • IconCriticalUser cannot use esc or another key to dismiss the tooltip.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.