Info-tips

Info-tips are used to display contextual information to the user. They do not force the user to act upon it like a modal, they are merely available for quick information or linked access to another object.

Healthy
Healthy

Preview

Storybook failed to load. Please connect to the VPN to access.

Guidelines

 

An info-tip is a floating popup with larger content than tooltips which is displayed on hover. It can also be an analytical-tip that share data and is shown on hover of a chart or data numbers that need additional information.

 

 

Behaviours

An info-tips is displayed on hover of the element it belongs to.

Standard delay we use for displaying a infotip on hover is 500ms, but it is optional and can be adjusted as needed (eg. some infotips in Analytics are shown instantly).

On the graphs the info-tips will always be following the cursor at a 8 pixels distance and placed on the left. In case there isn’t enough space in the viewport, the info-tips is moved to the side or above.

E.g. Analytics

E.g. Analytics

 

Placement

Placement at the top

Placement info-tips top

 

Placement on the right

Placement info-tips right

 

Placement at the bottom start

Placement info-tips bottom start

 

Analytics placement

Only in case of the graphs the info-tips will follow the mouse cursor bellow the referring element. When there isn’t enough space in the viewport, the info-tips is moved to the side or above.

 

Content alignment

To optimise for readability of the content, use left-alignment at all times. The exceptional cases could use center aligned. Only for arabic and other languages that read right to left, use right-alignment.

 

 

Do's and Dont's

  • Use max width: 350px
  • Use only one, either header or title
  • Use text formatting as needed

 

Analytics (data info tips)

  • Use only Header
  • Use max 4 legend items
  • Use more than 400 characters (we don't limit in development, just for designers)

 

Analytics (data info tips) :

  • Use section title

 

 

Variants

 

Short text

Variant short text

Header + text

Variant header + text

Section title + text

Variant section title + text

Header + data

Variant header + data