From 1d90ed19fbecb18c1df20b11e9f51810012fdf8f Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Fri, 2 Feb 2024 15:48:35 +0100
Subject: [PATCH] Docs(web-twig): Add demo with Tooltip on Icon cmp

- New demo with tooltip on Icon component
---
 .../components/Tooltip/Tooltip.stories.twig   |  4 ++++
 .../Tooltip/stories/TooltipIcon.twig          | 24 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipIcon.twig

diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
index b703a709ea..7962597faf 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -30,6 +30,10 @@
         {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %}
     </DocsSection>
 
+    <DocsSection title="Tooltip on Icon Component">
+        {% include '@components/Tooltip/stories/TooltipIcon.twig' %}
+    </DocsSection>
+
     <DocsSection title="Advanced Floating Functionality">
         {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %}
     </DocsSection>
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipIcon.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipIcon.twig
new file mode 100644
index 0000000000..88ba2c215e
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipIcon.twig
@@ -0,0 +1,24 @@
+<span>
+  Click on the icon on the right to view the tooltip
+  <TooltipWrapper UNSAFE_className="spirit-feature-tooltip-enable-data-placement d-inline-block">
+        <Icon
+          id="button-example-with-icon"
+          name="info"
+          boxSize="16"
+          marginBottom="space-200"
+          aria-describedby="tooltip-example-with-icon"
+          data-spirit-toggle="tooltip"
+          data-spirit-target="#tooltip-example-with-icon"
+      />
+      <TooltipPopover
+          id="tooltip-example-with-icon"
+          UNSAFE_className="is-hidden"
+          enableControlledPlacement
+          placement="right"
+          flipFallbackPlacements="top-start, top-bottom, left"
+          isDismissible
+      >
+          Close me
+      </TooltipPopov>
+  </TooltipWrapper>
+</span>
\ No newline at end of file