Docs(web-react): Add demo with Tooltip on Icon cmp

- New demo with tooltip on Icon component

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;

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>