diff options
| author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-03-27 17:20:40 +0000 |
|---|---|---|
| committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-03-27 17:20:40 +0000 |
| commit | c4c97d50ba39b048f6b242a1f3e5330d90422a3f (patch) | |
| tree | b36c2290f579437c8d5723d197b73e7741fed4ef /doc | |
| parent | bc36dfe87fb630414e468fbc0d4f648caeff09d0 (diff) | |
| parent | 90c3981c1ae2ca434b923fac9a2f635505327c34 (diff) | |
| download | gitlab-ce-c4c97d50ba39b048f6b242a1f3e5330d90422a3f.tar.gz | |
Merge branch 'uxguide-tooltips' into 'master'
Improve UX guide on tooltips
See merge request !10220
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/development/ux_guide/components.md | 14 |
1 files changed, 12 insertions, 2 deletions
diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 18d0647c798..ac7c1b6207d 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -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).  ### 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.  |