Feat(web-twig): Tooltip can be opened by hover

lmc-eu · Feb 12, 2024 · 1aea196 · 1aea196
1 parent f96ebcb
commit 1aea196
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
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 Hover with Floating UI">
+        {% include '@components/Tooltip/stories/TooltipEnableHover.twig' %}
+    </DocsSection>
+
     <DocsSection title="Tooltip on Icon Component">
         {% include '@components/Tooltip/stories/TooltipIcon.twig' %}
     </DocsSection>

diff --git a/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig b/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig
@@ -8,6 +8,7 @@
 {%- set _enableFlippingCrossAxis = props.enableFlippingCrossAxis | default(null) -%}
 {%- set _enableShifting = props.enableShifting | default(null) -%}
 {%- set _enableSizing = props.enableSizing | default(null) -%}
+{%- set _enableHover = props.enableHover | default(false) -%}
 {%- set _flipFallbackAxisSideDirection = props.flipFallbackAxisSideDirection | default(null) -%}
 {%- set _flipFallbackPlacements = props.flipFallbackPlacements | default(null) -%}
 {%- set _placement = props.placement | default('bottom') -%}
@@ -23,6 +24,7 @@
 {%- set _enableFlippingCrossAxisValue = _enableFlippingCrossAxis ? 'true' : 'false' -%}
 {%- set _enableShiftingValue = _enableShifting ? 'true' : 'false' -%}
 {%- set _enableSizingValue = _enableSizing ? 'true' : 'false' -%}
+{%- set _enableHoverValue = _enableHover ? 'true' : 'false' -%}
 
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
 {%- set _ariaControlsAttr = _id ? 'aria-controls="' ~ _id | escape('html_attr') ~ '"' : null -%}
@@ -33,6 +35,7 @@
 {%- set _dataFlipFallbackPlacementsAttr = _flipFallbackPlacements and _enableControlledPlacement ? 'data-spirit-flip-fallback-placements="' ~ _flipFallbackPlacements | escape('html_attr') ~ '"' : null -%}
 {%- set _dataEnableShiftingAttr = _enableShifting and _enableControlledPlacement ? 'data-spirit-enable-shifting="' ~ _enableShiftingValue ~ '"' : null -%}
 {%- set _dataEnableSizingAttr = _enableSizing and _enableControlledPlacement ? 'data-spirit-enable-sizing="' ~ _enableSizingValue ~ '"' : null -%}
+{%- set _dataEnableHoverAttr = _enableHover and _enableControlledPlacement ? 'data-spirit-enable-hover="' ~ _enableHoverValue ~ '"' : null -%}
 {%- set _dataEnableControlledPlacement = _enableControlledPlacement ? 'data-spirit-placement-controlled' : null -%}
 {%- set _dataTargetAttr = _id ? 'data-spirit-target="#' ~ _id | escape('html_attr') ~ '"' : null -%}
 
@@ -54,6 +57,7 @@
     {{ _dataFlipFallbackPlacementsAttr | raw }}
     {{ _dataEnableShiftingAttr | raw }}
     {{ _dataEnableSizingAttr | raw }}
+    {{ _dataEnableHoverAttr | raw }}
 >
     {% block content %}{% endblock %}
     {% if _isDismissible == 'true' %}

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipEnableHover.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipEnableHover.twig
@@ -0,0 +1,18 @@
+<TooltipWrapper UNSAFE_className="spirit-feature-tooltip-enable-data-placement d-inline-block">
+    <Button
+        id="button-example-hover"
+        aria-describedby="tooltip-example-hover"
+        data-spirit-toggle="tooltip"
+        data-spirit-target="#tooltip-example-hover"
+    >
+        I have a tooltip 😎
+    </Button>
+    <Tooltip
+        id="tooltip-example-hover"
+        UNSAFE_className="is-hidden"
+        placement="right"
+        enableHover="true"
+    >
+        Hello there!
+    </Tooltip>
+</TooltipWrapper>