Help tooltip

Help tooltips are used to display informative text when the user hovers over an element

External resources
check_circle_outline

Fully implemented in the LOGEX framework

Variants

There are 4 variants, depending on the target element’s position.

Arrow position

  1. Top right
  2. Top left
  3. Bottom right
  4. Bottom left
  5. Middle left (Only to be used for the left menu buttons)

Usage

Help tooltips display an informative text, that should describe its function. This is a great way to clarify what an icon does when clicked.

Use tooltips to explain imagery

Don’t restate visible UI text

Pick an alignment for the tooltip that works best

Tooltips should not be cropped

Something missing? Contact one of the designers.