kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Improve UX guide on tooltips

Browse source
This commit is contained in:
Pedro Moreira da Silva 2017-03-27 16:25:26 +01:00
parent a56f8fdd19
commit 90c3981c1a
1 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
doc/development/ux_guide/components.md
View file

@ -19,14 +19,24 @@
---
## Tooltips
Tooltips identify elements or provide additional, useful information about the referring elements. Tooltips are different from ALT-attributes, which are intended primarily for static images. Tooltips are summoned by:
* Hovering over an element with a cursor
* Focusing on an element with a keyboard (usually the tab key)
* Upon touch
### Usage
A tooltip should only be added if additional information is required.
A tooltip should be used:
* When there isn’t enough space to show the information
* When it isn’t critical for the user to see the information
* For icons that don’t have a label
Tooltips shouldn’t repeat information that is shown near the referring element. However, they can show the same data in a different format (e.g. date or timestamps).
![Tooltip usage](img/tooltip-usage.png)
### Placement
By default, tooltips should be placed below the element that they refer to. However, if there is not enough space in the viewpoint, the tooltip should be moved to the side as needed.
By default, tooltips should be placed below the referring element. However, if there isn’t enough space in the viewport, the tooltip should be moved to the side as needed.
![Tooltip placement location](img/tooltip-placement.png)