Tooltips should be used to clarify system information and require user action to be displayed.
|
|
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Tooltip |
Displays while mouse hovering specific elements |
Immediately next to the chosen element |
Hover a trigger element |
Anatomy
Structure
|
|
|
tip |
Tooltip tip has positioning properties, in the example above you can see all the possibilities regarding the tip position |
|
container |
This is the tooltip container, and it holds all sorts of content. In the example above, it is a container for a text element, but it can hold, images, icons, text... |
Sizes and spaces
|
The width of the element is responsive to its content.
If the content is too long, and the tooltip exceeds 320px, the copy does a line break |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Vertical tip position |
top side bottom |
This should be chosen accordingly to the design. Users should immediately understand what item the tooltip refers to. |
|
Horizontal tip position |
left centre right |
This should be chosen accordingly to the design. Users should immediately understand what item the tooltip refers to. |
|
Style |
light dark |
Deciding which style to use depends on the colour of the elements the tooltip will overlay. There must be sufficient contrast between the background and the tooltip. |
Behaviour
Interaction
The tooltip component shows up when the user intereacts with an element that contains "extra information". It has 200ms animation duration, and it moves 6px down, and transparency goes from 0 to 100%
Guidelines
|
|