EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
5.0.UI Patterns    5.5.Help and tooltips

5.5.Help and tooltips

More complex input fields can make use of various types of tooltips, which provide brief guidance or examples of the expected entry format.

Browser tooltips

The easiest and least complicated type of tooltip is the use of title attributes, for example, for the input tag or the input field as a whole. In general, all input elements should have this attribute, as it can, for example, also be read by screen readers. If no additional information must or should be offered, the tooltip generally merely repeats the label.

Tooltip widgets

Various JS frameworks offer tooltips as widgets. The advantage of this is that these tooltips can be structured and their behavior better controlled. In general, the tooltip appears as long as the user is focused on the input field.


Unlike a tooltip, which is displayed with a mouseover, a popover appears when the user clicks on an element. Popovers allow for more information than a tooltip.

Context help

If a form requires longer descriptive texts throughout, it should be determined if there is room in the page layout for a certain area with context-dependent help information. Explanatory texts can be displayed much better in this sort of reserved space.

Some Image

Example of a Tooltip widget

    Some Image

    Example of contextual help for long explanatory texts

      Usability hint

      • Tooltips, popovers and context help are essential for the ability of an application to promote learning and make information self-explanatory, so they should be included in all cases.
      • The information offered by tooltips should provide the user with added value; simply describing an icon is not sufficient (negative example of Lotus Notes: the handshake icon is described with the words "handshake symbol" – it would have been better to write something like "This invitation has been accepted").
      • Explanatory text in the tooltip should be kept brief (no more than a maximum of two sentences).
      • Longer texts should be provided in a popover or, if necessary, in a context help area.