Tooltip

Tooltips are floating labels to describe or add additional information when users hover over, focus on, or click an interactive element (touch screens).

A tooltip is a brief, informative message (three or less words) that appears when a user interacts with an element in a graphical user interface (GUI). Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture*.

Tooltips can be attached to any active element (icons, text links, buttons, etc.) on a page. They provide descriptions or explanations for their paired element. Thus, tooltips are highly contextual and specific and don’t explain the bigger picture or entire task flow

One important aspect of tooltips is that they are user-triggered. Therefore, tips that pop up on pages to inform users about new features or how to use a specific functionality are not tooltips. Because tooltips are initiated by a hover gesture, they can be used only on devices with a mouse or keyboard. They are not normally available on touchscreens.

Tooltips aren’t new, but they’re still misused.

Do use helper text for pertinent information.

Do not use tooltips for information for a user to complete their task.

Use succinct, directive text.

Do not use interactive elements within a tooltip. Use a *toggletip instead.

Need to know

• Tooltips are used to provide additional information when space is tight.
  

• Tooltips must be concise with one or more lines of text.
  

• Tooltips must be accessible via hover and focus only.
  

• Trigger tooltips from Interactive elements (Buttons, Links, Icon buttons) or Non-interactive elements (Icons, Abbreviations, Truncated text)—be mindful of keyboard accessibility
  

• Use sparingly. Tooltips innately hide information. Consider exposing it immediately without a tooltip or removing it completely.
  

• Never include any kind of error messages in a tooltip
  

• Tooltips have slightly different guidelines to Popovers and Modals. For more information, see Popover and Modal guidelines.
  

• If the information is crucial for a user to proceed, consider using a modal or notification instead.
  

• Position tooltips so they don’t block related content.
  

Tooltips are often a fail-safe for users when they can’t understand a feature. Many of today’s use cases for tooltips could be omitted if people followed other design guidelines (for example, labeling icons). Important information should always be on the page; therefore, tooltips shouldn’t be essential for the tasks users need to accomplish on your site.

Content

• Should contain relevant, specific content.
  

• Keep tooltips short and concise, no longer than a sentence or two.
  

• Should not contain required information essential for a user to complete their task since a tooltip is not persistent.
  

• Use sentence-style capitalization and write the text as full sentences with punctuation, unless space is limited.
  

• Icon button tooltips that describe a button’s function should only contain one or two words.
  

Universal behaviors

States:

The tooltip component has two states: active and inactive. By default, the tooltip is hidden and inactive. Tooltips are displayed on hover and focus. Definition tooltips though can be displayed either on hover and focus or on click and enter.

Interactions:

Mouse:
Tooltips are triggered when the mouse hovers over or focuses on the UI trigger. The tooltip persists as long as the mouse remains over the active container or the UI trigger. The tooltip is dismissed by hovering away or moving focus to another element. Definition tooltip can additionally be activated on click or enter and dismissed by clicking outside of active container or UI element.

Keyboard:
Users can trigger a tooltip by focusing on element. Addtionally, a definition tooltip can be triggered by using the enter key. A tooltip dismissible by use of the escape key.

Screen readers/VoiceOver:
Users can trigger a button to open a popover by pressing enter or space while the button has focus.

* Toggletips vs Tooltips

The two components differ in the way they are invoked and dismissed and if the user must interact with the contents.
A tooltip is exposed on hover or focus when you need to expose brief, supplemental information that is not interactive.
A toggletip is used on click or enter when you need to expose interactive elements, such as button, that a user needs to interact with.

Tooltips vs. Popover, Coachmarks and Modals

Tooltips are floating labels to describe or add additional information when users hover over, focus on, or click an interactive element. Usually 3 words or less.

A popover displays rich content in a non-modal dialog to describe or add additional information when users hover over, focus on, or click an interactive element. User can interact with popover content, including selecting text or clicking links.

Coachmarks: Coachmarks are used for guided tours to onboard people to new interfaces. We rarely use coachmarks. When we do, they follow our Popover style.

Modals show additional content in a layer above the page with an overlay covering the page behind. Use sparingly.

* Tooltips vs. Popup Tips

Although tooltips are mainly limited to desktop computers and laptops, they do have a sister element that is common on touchscreen devices: popup tips. Both tooltips and popup tips have the same goal: to provide helpful, additional content. The following table shows the key similarities and differences between popup tips and tooltips.