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.
-
-
-
-
+
+
+
+
+
+
Use the tooltip that corresponds with the theme of the container it’s in.
+
+
+
+
+
+
+
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.
-
-
-
-
+
+
+
+
+
+
Place the tooltip so that the whole element is visible.
+
+
+
+
+
+
+
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.
-
-
-
-
+
+
+
+
+
+
Tooltips should be used if a user might need to know more information to understand the page or to complete an action.
+
+
+
+
+
+
+
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 @@
+