Components

Tooltip

Design
Code

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.

Triggers

information
Track each athlete's viewing activity to make sure everyone's on the same page.

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.

information
Track each athlete's viewing activity to make sure everyone's on the same page.

Delay

information
Track each athlete's viewing activity to make sure everyone's on the same page.

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.

tooltip-bold-dont

Don'tbold an entire tooltip.

tooltip-bold-do

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.

tooltip-metadata-dont

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

tooltip-metadata-do

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.

tooltip-forms-dont

Don'tuse a tooltip in addition to help text.

tooltip-forms-do

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.

tooltip-disabledbutton-dont

Don'tsimply say that the button is disabled.

tooltip-disabledbutton-do

Doprovide more context around what enables the button.

Microcopy

Content Length

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

tooltip-contentlength-dont

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

tooltip-contentlength-do

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.

tooltip-direct-dont

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

tooltip-direct-do

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.

tooltip-punctuation-dont

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

tooltip-punctuation-do

Douse a period to instill confidence in the complete thought.

Platforms

platformnotes
Web
  • Stick to the guidelines above.