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

- New demo with tooltip on Icon component

packages/web-react/src/components/Tooltip/README.md

@@ -277,7 +277,6 @@ const [open, setOpen] = React.useState(false);
 | `children`                      | `ReactNode`                                  | —                   | ✔        | Tooltip children's nodes - `TooltipTrigger` and `TooltipPopover`                                                                                                                                                                                                           |
 | `enableFlipping`                | `bool`                                       | true                | ✕        | Enables [flipping][floating-ui-flip] of the element’s placement when it starts to overflow its boundary area. For example `top` can be flipped to `bottom`.                                                                                                                |
 | `enableFlippingCrossAxis`       | `bool`                                       | true                | ✕        | Enables flipping on the [cross axis][floating-ui-flip-cross-axis], the axis perpendicular to main axis. For example `top-end` can be flipped to the `top-start`.                                                                                                           |
-| `triggers`                      | ["click" \| "hover"]                         | ["click", "hover" ] | ✕        | How tooltip is triggered: click, hover. You may pass multiple triggers.                                                                                                                                                                                                    |
 | `enableShifting`                | `bool`                                       | true                | ✕        | Enables [shifting][floating-ui-shift] of the element to keep it inside the boundary area by adjusting its position.                                                                                                                                                        |
 | `enableSizing`                  | `bool`                                       | true                | ✕        | Enables [sizing][floating-ui-size] of the element to keep it inside the boundary area by setting the max width.                                                                                                                                                            |
 | `flipFallbackAxisSideDirection` | ["none" \| "start" \| "end"]                 | "none"              | ✕        | Whether to allow [fallback to the opposite axis][floating-ui-flip-fallback-axis-side-direction] if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction. |
@@ -287,6 +286,7 @@ const [open, setOpen] = React.useState(false);
 | `isOpen`                        | `bool`                                       | -                   | ✔        | Open state                                                                                                                                                                                                                                                                 |
 | `onToggle`                      | `() => void`                                 | -                   | ✔        | Function for toggle open state of dropdown                                                                                                                                                                                                                                 |
 | `placement`                     | [Placement Dictionary][dictionary-placement] | "bottom"            | ✕        | Placement of tooltip                                                                                                                                                                                                                                                       |
+| `trigger`                      | ["click" \| "hover"]                         | ["click", "hover" ] | ✕        | How tooltip is triggered: click, hover. You may pass multiple triggers.                                                                                                                                                                                                    |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]

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

@@ -14,6 +14,7 @@ import TooltipOnHover from './TooltipOnHover';
 import TooltipPlacements from './TooltipPlacements';
 import TooltipWithFloatingUI from './TooltipWithFloatingUI';
 import TooltipHover from './TooltipHover';
+import TooltipIcon from './TooltipIcon';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -36,6 +37,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Tooltip on Hover with Floating UI">
         <TooltipHover />
       </DocsSection>
+      <DocsSection title="Tooltip on Icon Component">
+        <TooltipIcon />
+      </DocsSection>
       <DocsSection title="Advanced Floating Functionality" stackAlignment="stretch">
         <TooltipWithFloatingUI />
       </DocsSection>