
Help tooltip
Help tooltips are used to display informative text when the user hovers over an element
External resources
Fully implemented in the LOGEX framework
Variants
There are 4 variants, depending on the target element’s position.

Arrow position
- Top right
- Top left
- Bottom right
- Bottom left
- 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