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

- New demo with tooltip on Icon component
lmc-eu · Feb 13, 2024 · d0b8f6b · d0b8f6b
1 parent 21bd758
commit d0b8f6b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tooltip/README.md b/packages/web-twig/src/Resources/components/Tooltip/README.md
@@ -144,6 +144,7 @@ Advanced floating functionality is provided by JavaScript plugin and by [Floatin
 | `closeLabel`                    | `string`                                     | `Close`  | ✕        | Close label                                                                                                                                                                                                                                                                |
 | `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`.                                                                                                           |
+| `enableHover`                   | `bool`                                       | false    | ✕        | Enables hover functionality when the cursor is positioned over the trigger.                                                                                                                                                                                                |
 | `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. |

diff --git 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
@@ -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>