Overview

Tooltips appear on mouseover in desktop applications and not on mobile/touchscreen devices. They briefly explain fields, buttons, GUI icons, and other user interface elements that don't have any text. Tooltips also help make screens more accessible because, as text strings, they can be processed by assistive technologies such as screen readers.

Image
Tooltip

When to Use

Before creating a tooltip, check whether it is required at all.

1
do
false

Recommended

  • As labels for elements that have no text, such as icons.
  • If the information you're about to add is unnecessary as permanent text on the screen.
1
dont
false

Not Recommended

  • If the label of a user interface element describes the use sufficiently.
  • If you want to abbreviate a text. It's better to write the full text of the label. Strive at using a solution that will be equally visible on all devices.
  • If you want to provide a more detailed explanation. Use Web Assistant instead.

See also:

Web Assistant

Writing Tooltips

Punctuation and Capitalization

1
do
false

Recommended

  • Use title case if the tooltip is like a label or title. Example: Current Start Date
  • Use sentence style if the tooltip consists of a complete sentence (for example, an instruction) or is a longer verbal formulation.
  • Use an ending period (.) for complete sentences. Example: Confirm the classification of the items.
  • Use a verb in the imperative if the tooltip is an instruction or in the third person if the software determines the action.
  • Keyboard shortcuts in parentheses ( ) are an accessibility requirement for buttons, GUI icons, and expandable elements such as trees or hierarchies. Example: Print (Ctrl + P).

Content and Formulation

1
do
false

Recommended

  • Tooltip should be short: 5-10, up to 15 words. Long texts don't look attractive and can be hard to read.
  • Align a set of tooltip formulations and examples that are suited to your product area or software type.
1
dont
false

Not Recommended

  • Don't copy the label of the user interface element as it is to the tooltip. This is redundant.

See also:

Fiori Design Guideline - UI Text Guidelines for SAP Fiori Apps

UA Documentation - Punctuation Marks and Special Characters on the User Interface