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

- New demo with tooltip on Icon component
---
 .../TooltipModern/demo/TooltipIcon.tsx        | 35 +++++++++++++++++++
 .../components/TooltipModern/demo/index.tsx   |  4 +++
 2 files changed, 39 insertions(+)
 create mode 100644 packages/web-react/src/components/TooltipModern/demo/TooltipIcon.tsx

diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipIcon.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipIcon.tsx
new file mode 100644
index 0000000000..8c95877679
--- /dev/null
+++ b/packages/web-react/src/components/TooltipModern/demo/TooltipIcon.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Icon } from '../../Icon';
+import { TooltipModern, TooltipPopover, TooltipTrigger } from '../../Tooltip';
+
+const TooltipIcon = () => {
+  const [openIcon, setOpenIcon] = useState(false);
+
+  return (
+    <div className="spirit-feature-tooltip-enable-data-placement">
+      <p>
+        Click on the icon on the right to view the tooltip{' '}
+        <TooltipModern
+          id="tooltip-example-with-icon"
+          isOpen={openIcon}
+          onToggle={setOpenIcon}
+          placement="right"
+          flipFallbackPlacements={['top-start', 'bottom-start', 'left']}
+          UNSAFE_className="d-inline-block"
+          isDismissible
+        >
+          <TooltipTrigger
+            elementType={Icon}
+            name="info"
+            boxSize={16}
+            UNSAFE_className="d-inline-block"
+            marginBottom="space-200"
+          />
+          <TooltipPopover>Close me</TooltipPopover>
+        </TooltipModern>
+      </p>
+    </div>
+  );
+};
+
+export default TooltipIcon;
diff --git a/packages/web-react/src/components/TooltipModern/demo/index.tsx b/packages/web-react/src/components/TooltipModern/demo/index.tsx
index 5a8bbd4cf8..f9711f85a6 100644
--- a/packages/web-react/src/components/TooltipModern/demo/index.tsx
+++ b/packages/web-react/src/components/TooltipModern/demo/index.tsx
@@ -13,6 +13,7 @@ import TooltipDismissibleViaJS from './TooltipDismissibleViaJS';
 import TooltipOnHover from './TooltipOnHover';
 import TooltipPlacements from './TooltipPlacements';
 import TooltipWithFloatingUI from './TooltipWithFloatingUI';
+import TooltipIcon from './TooltipIcon';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -32,6 +33,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Dismissible Tooltip via JS API and Floating UI">
         <TooltipDismissibleViaJS />
       </DocsSection>
+      <DocsSection title="Tooltip on Icon Component">
+        <TooltipIcon />
+      </DocsSection>
       <DocsSection title="Advanced Floating Functionality" stackAlignment="stretch">
         <TooltipWithFloatingUI />
       </DocsSection>