summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDimitrie Hoekstra <dimitriehoekstra@gmail.com>2017-10-03 13:34:20 +0200
committerDimitrie Hoekstra <dimitriehoekstra@gmail.com>2017-10-03 13:34:20 +0200
commiteeb05e34d4ac1f69d1c524cd3490fef03c3ecec1 (patch)
treee04a520e6f10dabc94ef180a7dac6e87636634c2
parent857e2520d86969e2f36ec682844c19411c75b4e6 (diff)
downloadgitlab-ce-eeb05e34d4ac1f69d1c524cd3490fef03c3ecec1.tar.gz
added descriptive notations to the images
-rw-r--r--doc/development/ux_guide/components.md8
1 files changed, 6 insertions, 2 deletions
diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md
index af46a4fdd2c..081d3174ba6 100644
--- a/doc/development/ux_guide/components.md
+++ b/doc/development/ux_guide/components.md
@@ -56,17 +56,21 @@ A popover should be used:
* When it isn’t critical for the user to act upon the information
* When you want to give a user a summary of extended information and the option to switch context if they want to dive in deeper.
-![Popover usage](img/popover-placement-below.png)
-
### Styling
A popover can contain a header section with a different background color if that improves readability and separation of content within.
+![Popover usage](img/popover-placement-below.png)
+
+This example shows two sections, where each section includes an actionable element. The first section shows a summary of the content shown when clicking the "read more" link. With this information the user can decide to dive deeper or start their GitLab Enterprise Edition trial immediately.
+
### Placement
By default, tooltips should be placed below the referring element. However, if there isn’t enough space in the viewport or it blocks related content, the tooltip should be moved to the side or above as needed.
![Tooltip placement location](img/popover-placement-above.png)
+In this example we let the user know more about the setting they are deciding over, without loosing context. If they want to know even more they can do so, but with the expectation of opening that content in a new view.
+
---
## Anchor links