diff --git a/elements/rh-tooltip/docs/20-guidelines.md b/elements/rh-tooltip/docs/20-guidelines.md index 1193e15a77..e26b9840d1 100644 --- a/elements/rh-tooltip/docs/20-guidelines.md +++ b/elements/rh-tooltip/docs/20-guidelines.md @@ -86,35 +86,74 @@ A tooltip can generally be used on both large and small breakpoints if the conte ### White on white -Do not use a dark theme tooltip in light theme environments. - - - A dark theme or white tooltip used on a white background is incorrect usage - +
+ + + Light theme tooltip against a light background + +

Use the tooltip that corresponds with the theme of the container it’s in.

+
+ + + + Dark theme tooltip against a light background + +

Do not use a dark theme tooltip in light theme environments and vice versa.

+
+
### Cut off by browser window -A tooltip should not be cut off by the browser window. Change the orientation if it does. - - - If using the top orientation will cause the tooltip to get cut off, that is incorrect usage - +
+ + + Tooltip fits in the bounds of a form container + +

Place the tooltip so that the whole element is visible.

+
+ + + + Tooltip is cut off by the edge of a form container + +

A tooltip should not be cut off by the browser window. Change the orientation if it does.

+
+
### Unnecessary pairing -Do not add a tooltip to interface elements or actions that do not require further explanation. - - - Pairing a tooltip with an element that already has adequate descriptive text is incorrect usage - +
+ + + Tooltip that says 'Settings' above an icon + +

Tooltips should be used if a user might need to know more information to understand the page or to complete an action.

+
+ + + + Tooltip that says 'Click here to get started' above a call to action that says 'Get started' + +

Do not add a tooltip to interface elements or actions that do not require further explanation.

+
+
diff --git a/elements/rh-tooltip/docs/tooltip-best-practice-1.png b/elements/rh-tooltip/docs/tooltip-best-practice-1.png deleted file mode 100755 index ac763b3d03..0000000000 Binary files a/elements/rh-tooltip/docs/tooltip-best-practice-1.png and /dev/null differ diff --git a/elements/rh-tooltip/docs/tooltip-best-practice-2.png b/elements/rh-tooltip/docs/tooltip-best-practice-2.png deleted file mode 100755 index b8202ea693..0000000000 Binary files a/elements/rh-tooltip/docs/tooltip-best-practice-2.png and /dev/null differ diff --git a/elements/rh-tooltip/docs/tooltip-best-practice-3.png b/elements/rh-tooltip/docs/tooltip-best-practice-3.png deleted file mode 100755 index 2f0123e458..0000000000 Binary files a/elements/rh-tooltip/docs/tooltip-best-practice-3.png and /dev/null differ diff --git a/elements/rh-tooltip/docs/tooltip-best-practice-pairing-do.svg b/elements/rh-tooltip/docs/tooltip-best-practice-pairing-do.svg new file mode 100644 index 0000000000..52a439b969 --- /dev/null +++ b/elements/rh-tooltip/docs/tooltip-best-practice-pairing-do.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tooltip/docs/tooltip-best-practice-pairing-dont.svg b/elements/rh-tooltip/docs/tooltip-best-practice-pairing-dont.svg new file mode 100644 index 0000000000..1802e6e7e9 --- /dev/null +++ b/elements/rh-tooltip/docs/tooltip-best-practice-pairing-dont.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tooltip/docs/tooltip-best-practice-position-do.svg b/elements/rh-tooltip/docs/tooltip-best-practice-position-do.svg new file mode 100644 index 0000000000..842526c580 --- /dev/null +++ b/elements/rh-tooltip/docs/tooltip-best-practice-position-do.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tooltip/docs/tooltip-best-practice-position-dont.svg b/elements/rh-tooltip/docs/tooltip-best-practice-position-dont.svg new file mode 100644 index 0000000000..b3781b71e7 --- /dev/null +++ b/elements/rh-tooltip/docs/tooltip-best-practice-position-dont.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tooltip/docs/tooltip-best-practices-white-on-white-do.svg b/elements/rh-tooltip/docs/tooltip-best-practices-white-on-white-do.svg new file mode 100644 index 0000000000..8e2a697f0c --- /dev/null +++ b/elements/rh-tooltip/docs/tooltip-best-practices-white-on-white-do.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tooltip/docs/tooltip-best-practices-white-on-white-dont.svg b/elements/rh-tooltip/docs/tooltip-best-practices-white-on-white-dont.svg new file mode 100644 index 0000000000..615db42f8b --- /dev/null +++ b/elements/rh-tooltip/docs/tooltip-best-practices-white-on-white-dont.svg @@ -0,0 +1,6 @@ + + + + + +