Docs(web): Put pure CSS examples of Tooltip in line so they are usa…

…ble in more viewport sizes
lmc-eu · Nov 3, 2023 · 2125d71 · 2125d71
1 parent d416939
commit 2125d71
Showing 1 changed file with 34 additions and 32 deletions.
diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html
@@ -167,42 +167,44 @@ <h2 class="docs-Heading">Static Tooltip (No Interaction)</h2>
 
     <h2 class="docs-Heading">Tooltip on Hover (Pure CSS)</h2>
 
-    <div class="docs-Stack docs-Stack--start">
+    <div class="docs-Stack docs-Stack--stretch">
 
-      <div class="TooltipWrapper d-inline-block">
-        <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-top">
-          Tooltip on top
-        </button>
-        <div id="my-tooltip-hover-top" class="Tooltip Tooltip--top">
-          Hello there!
-          <span class="Tooltip__arrow"></span>
+      <div>
+        <div class="TooltipWrapper d-inline-block mr-600 mb-600">
+          <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-top">
+            Tooltip on top
+          </button>
+          <div id="my-tooltip-hover-top" class="Tooltip Tooltip--top">
+            Hello there!
+            <span class="Tooltip__arrow"></span>
+          </div>
         </div>
-      </div>
-      <div class="TooltipWrapper d-inline-block">
-        <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-right">
-          Tooltip on right
-        </button>
-        <div id="my-tooltip-hover-right" class="Tooltip Tooltip--right">
-          Hello there!
-          <span class="Tooltip__arrow"></span>
+        <div class="TooltipWrapper d-inline-block mr-600 mb-600">
+          <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-right">
+            Tooltip on right
+          </button>
+          <div id="my-tooltip-hover-right" class="Tooltip Tooltip--right">
+            Hello there!
+            <span class="Tooltip__arrow"></span>
+          </div>
         </div>
-      </div>
-      <div class="TooltipWrapper d-inline-block">
-        <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-bottom">
-          Tooltip on bottom
-        </button>
-        <div id="my-tooltip-hover-bottom" class="Tooltip Tooltip--bottom">
-          Hello there!
-          <span class="Tooltip__arrow"></span>
+        <div class="TooltipWrapper d-inline-block mr-600 mb-600">
+          <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-bottom">
+            Tooltip on bottom
+          </button>
+          <div id="my-tooltip-hover-bottom" class="Tooltip Tooltip--bottom">
+            Hello there!
+            <span class="Tooltip__arrow"></span>
+          </div>
         </div>
-      </div>
-      <div class="TooltipWrapper d-inline-block">
-        <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-left">
-          Tooltip on left
-        </button>
-        <div id="my-tooltip-hover-left" class="Tooltip Tooltip--left">
-          Hello there!
-          <span class="Tooltip__arrow"></span>
+        <div class="TooltipWrapper d-inline-block">
+          <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-left">
+            Tooltip on left
+          </button>
+          <div id="my-tooltip-hover-left" class="Tooltip Tooltip--left">
+            Hello there!
+            <span class="Tooltip__arrow"></span>
+          </div>
         </div>
       </div>