fixup! Docs(web): Add Tooltip demo #DS-914

packages/web/src/scss/components/Tooltip/dismissible-tooltip.mjs

@@ -0,0 +1,16 @@
+import Tooltip from '../../../js/Tooltip.ts';
+
+const myTooltipEl = document.getElementById('my-dismissible-tooltip2');
+const myTooltip = new Tooltip(myTooltipEl);
+
+// Remove 'my-tooltip' key from localStorage to show tooltip again.
+// localStorage.removeItem('my-tooltip');
+
+if (!window.localStorage.getItem('my-tooltip')) {
+  myTooltip.show();
+}
+
+document.getElementById('my-dismissible-tooltip2-button').addEventListener('click', () => {
+  myTooltip.hide();
+  window.localStorage.setItem('my-tooltip', true);
+});

packages/web/src/scss/components/Tooltip/index.html

@@ -78,7 +78,7 @@ <h2 class="docs-Heading">Tooltip on Click (JavaScript)</h2>
       <button
         type="button"
         id="tooltip-trigger"
-        class="Button Button--primary Button--medium mb-800"
+        class="Button Button--primary Button--medium"
         data-spirit-target="#my-js-controlled-tooltip"
         data-spirit-toggle="tooltip"
       >
@@ -129,6 +129,8 @@ <h2 class="docs-Heading">Dismissible Tooltip via JS API</h2>
       Saves data to local storage.
     </p>
 
+    <script type="module" src="dismissible-tooltip.mjs"></script>
+
     <div class="TooltipWrapper d-inline-block">
       <button class="Button Button--primary Button--medium" aria-describedby="my-dismissible-tooltip2">I have a tooltip 😎</button>
       <div id="my-dismissible-tooltip2" class="Tooltip Tooltip--right Tooltip--dismissible is-hidden">
@@ -150,21 +152,6 @@ <h2 class="docs-Heading">Dismissible Tooltip via JS API</h2>
       </div>
     </div>
 
-    <script type="module">
-      import Tooltip from '../../../js/Tooltip.ts';
-      const myTooltipEl = document.getElementById('my-dismissible-tooltip2');
-      const myTooltip = new Tooltip(myTooltipEl);
-
-      if(!window.localStorage.getItem('my-tooltip')) {
-        myTooltip.show();
-      }
-
-      document.getElementById('my-dismissible-tooltip2-button').addEventListener('click', () => {
-        myTooltip.hide();
-        window.localStorage.setItem('my-tooltip', true);
-      });
-    </script>
-
   </section>
   <section id="advanced-positioning" class="docs-Section">