Preview
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
Placement
Placement at the top
Placement on the right
Placement at the 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
Header + text
Section title + text
Header + data
