Tooltips appear next to the mouse pointer when it hovers over an element that offers a tooltip. Tooltips are shown only for elements that do not have a label or, in rare cases, to display additional information.

Since tooltips are handled by the browser, the form of tooltips depends on the platform, the browser, and the version.

Usage

Use a tooltip if:

• You have an element that cannot be attached to a label.
• You are showing an icon-only button.
• You want to show in-place information within a map.
• You are showing a button that contains only an icon and a number.

Do not use a tooltip if:

• You want to show the full text for a truncated item. Instead, make more space for the item.
• You don’t want to use a label. You should always use a label.
• You want to offer an explanation or provide help. Instead, use help systems.
• The content of the tooltip would be redundant.

Responsiveness

Tooltips are usually invoked by a mouseover event, which is why they are limited to desktop devices. Most touch-only devices have no way of showing tooltips.

Because tooltips cannot be displayed on all devices, they should never contain critical information. They should also not contain redundant information.

Types

Guidelines

Overwriting standard icon tooltips

The icon within an icon-only button usually comes with a standard tooltip. However, this default tooltip contains the technical icon name, which may not be the right term for the icon in your context. Always check all icons, and overwrite the default tooltip texts with suitable texts for your specific use case.

Resources