Docs(web): Add demo with Tooltip on Icon element

- New demo with tooltip on Icon element
lmc-eu · Feb 13, 2024 · 50b429b · 50b429b
1 parent d0b8f6b
commit 50b429b
Showing 1 changed file with 57 additions and 2 deletions.
diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html
@@ -373,11 +373,17 @@ <h2 class="docs-Heading">Dismissible Tooltip</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <div class="TooltipWrapper d-inline-block">
-        <button class="Button Button--primary Button--medium" aria-describedby="my-dismissible-tooltip">I have a tooltip 😎</button>
+        <button 
+          class="Button Button--primary Button--medium" 
+          aria-describedby="my-dismissible-tooltip"
+        >
+          I have a tooltip 😎
+        </button>
         <div
           id="my-dismissible-tooltip"
           class="Tooltip Tooltip--dismissible"
           data-spirit-placement="right"
+          data-spirit-trigger="click"
         >
           Close me
           <button
@@ -421,6 +427,7 @@ <h2 class="docs-Heading">Dismissible Tooltip via JS API and Floating UI</h2>
           data-spirit-flip="true"
           data-spirit-flip-cross-axis="true"
           data-spirit-flip-fallback-placements="right, top-end"
+          data-spirit-trigger="click"
           data-spirit-placement-controlled
         >
           Close me
@@ -467,6 +474,7 @@ <h2 class="docs-Heading">Tooltip on Hover with Floating UI</h2>
           data-spirit-placement="right"
           data-spirit-flip-fallback-placements="left, top-start, bottom-start"
           data-spirit-enable-hover="true"
+          data-spirit-trigger="click, hover"
           data-spirit-placement-controlled
         >
           Hello there!
@@ -478,6 +486,53 @@ <h2 class="docs-Heading">Tooltip on Hover with Floating UI</h2>
 
   </section>
 
+  <section class="docs-Section spirit-feature-tooltip-enable-data-placement">
+
+    <h2 class="docs-Heading">Tooltip on Icon Component</h2>
+
+    <div class="docs-Stack docs-Stack--start">
+
+      <span>
+        Click on the icon on the right to view the tooltip
+        <div class="TooltipWrapper d-inline-block" data-spirit-element="tooltip-wrapper">
+          <svg 
+            width="16" 
+            height="16" 
+            data-spirit-toggle="tooltip"
+            data-spirit-target="#tooltip-example-with-icon">
+            <use xlink:href="/icons/svg/sprite.svg#info"/>
+          </svg>
+          <div
+            id="tooltip-example-with-icon"
+            class="Tooltip Tooltip--dismissible is-hidden"
+            data-spirit-placement="right"
+            data-spirit-flip="true"
+            data-spirit-flip-cross-axis="true"
+            data-spirit-flip-fallback-placements="top-start, bottom-start, left"
+            data-spirit-placement-controlled
+          >
+            Close me
+            <button
+              id="tooltip-example-with-icon-button"
+              type="button"
+              class="Tooltip__close"
+              aria-controls="tooltip-example-with-icon"
+              aria-expanded="true"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+            <span class="Tooltip__arrow" data-spirit-element="arrow"></span>
+          </div>
+        </div>
+      </span>
+
+    </div>
+
+  </section>
+
   <section class="docs-Section spirit-feature-tooltip-enable-data-placement">
 
     <script type="module" src="floating-ui-example.mjs"></script>
@@ -626,4 +681,4 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
     </div>
   </section>
 
-{{/ layout/plain }}
+{{/ layout/plain }}