Stable

Tooltips

Unobtrusive messages that provide supplementary information

Usage

Tooltips are user-triggered messages that help provide additional information to a page element. They are usually activated by a mouse hover, keyboard focus, or tap.

Tooltips can be paired with any trigger, such as icons, buttons, text, etc...
Tooltip messages should not be critical for the user to read
There should be no action included within tooltips

Image for Tooltip usage

Anatomy

For a more detailed breakdown of spacing and sizing, view the design specs.

Image for Tooltip anatomy

Container: the container of the Tooltip
Trigger: indicate additional information is available via Tooltip on hover/focus
Label: a brief message that provides additional information to users
Tip: an arrow pointing from the Tooltip container to the related page element - always make sure that the Tooltip arrow is pointing at the associated page content and is vertically or horizontally centered based on the tooltip message

Placement

Depending on the location, Tooltips can be placed at the top, bottom, right, or left of the related page element.

Tooltip positioning

Behavior

Mouse hover action

Tooltips appear on hover and remain active until the user's cursor is no longer hovering over the associated trigger. A 200ms fade transitions the visibility of Tooltips.

Keyboard focus

When using a keyboard, users can use [tab] key to go through and select page elements. Tooltips appear when an element is in its keyboard focus state.

Tap gesture

For mobile devices such as cellphones and tablets, mouse-hover and keyboard focus states are not accessible for users. Tooltips are activated by tapping on the page element, and tap again to deactivate Tooltips.

Best practices

Keep Tooltips simple by only including concise texts.

Keep Tooltips simple by only including concise text.

Place actionable items in Tooltips, such as buttons and text links. Users will not be able to interact with them because the message will disappear as soon as the users move their cursor away from the page elements.

Tooltip messages must provide helpful information.

Tooltip messages should not repeat what's already visiable on the screen.

Tooltip messages should not repeat what's already visible on the screen.

Tooltips should be placed close to related content without being disruptive.

Do not block related page content or important functionality of the page.

Use a dotted blue underline as an alternative to trigger Tooltips on terminologies, or short phrases when additional explaination is needed.

Use a dotted blue underline as an alternative to trigger Tooltips on terminologies or short phrases when additional explanation is needed.

Ensure Tooltips do not block related page content. This will disturb users' workflow and cause repetitive actions (close Tooltips to view page element, hover and see Tooltips again, then close Tooltips and interact on the page).

Avoid using icons to initiate Tooltips when the page element/text is not right next to it because this may confuse users on what this Tooltip is associated with.

Only use the info icon when an icon is used as the trigger for a Tooltip.

The help icon should not be used as a trigger for a Tooltip. The help icon can be used with Popovers when a link to more helpful information might be necessary.

Use the HTML global attribute title to represent advisory information related to the element.

Use the HTML global attribute title to represent advisory information related to the element. If there is no visible name for the element you can reference, use aria-label to provide the user with a recognizable accessible name.

Avoid using Tooltips the same way as the HTML global attribute title.