Tooltips

Tooltips can be set for any UI element. They are primarily used to convey additional information about what controls (often icon buttons) do, but can also be used to show additional information about application content.

When to Use

Controls in the header bars of primary windows should all have tooltips. Elsewhere, only use tooltips when they are really useful, either by providing information that users look for, or information that enhances the user experience. Examples of useful tooltips for application content include showing the full URL for a link, or showing information about a syntax error in a code editor.

Otherwise, try to keep tooltip usage to a minimum, since they can get in the way when inadvertently displayed, and aren’t available in all contexts (such as touch devices). Don’t rely on tooltips to communicate essential information.

When setting tooltips, set them for all equivalent controls or elements. If a tooltip is provided for one control in a set, all other controls in that set should also have tooltips.

Tooltip Text

Tooltip labels should be short and written in header capitalization. For example:

Good Tooltip

Bad Tooltip

Recently Used Documents

Open recently used documents

Grid View

Switch to grid view

Fullscreen

Show the current image in fullscreen mode

When showing tooltips for controls that already have labels, avoid repeating the control label and try to provide useful supplementary information, or rephrase the existing label. For example:

Button Label

Tooltip

Open…

Select a File

Add user…

Create an Account

Connect

Open Address

Standard tooltip labels include:

Button

Tooltip

Notes

Go back

Back

Search

Search

In some cases, it can be useful to specify the content type. For example: Search Documents.

Primary menu

Main Menu

Secondary menu

Menu

Where possible, specify the item to which the menu applies. For example: Document Menu.

New tab

New Tab

Open bookmarks

Bookmarks

API Reference