Skip to content

Commit

Permalink
Feat(web-twig): Tooltip can be opened by hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@pavelklibani
pavelklibani committed Feb 13, 2024
1 parent 50b429b commit 66758dc
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 39 deletions.
2 changes: 0 additions & 2 deletions apps/web-twig-demo/assets/scripts/tooltip-advanced-usage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ const selectFallback = document.getElementById('my-advanced-select-fallback') as

const tooltip = Tooltip.getOrCreateInstance(document.getElementById('my-advanced-tooltip'));

tooltip.show();

checkboxFlip.addEventListener('change', () => tooltip.updateConfig({ enableFlipping: checkboxFlip.checked }));

checkboxFlipCrossAxis.addEventListener('change', () => {
Expand Down
31 changes: 17 additions & 14 deletions apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
import { Tooltip } from '@lmc-eu/spirit-web/src/js/index.esm';

const myTooltipEl = document.getElementById('my-dismissible-tooltip2');
const buttonId = 'my-dismissible-button';
const tooltipId = 'my-dismissible-tooltip-with-floating-ui';
const storageName = 'show-tooltip';
const myTooltipEl = document.getElementById(tooltipId);
const myTooltip = new Tooltip(myTooltipEl);

if (!window.localStorage.getItem('my-tooltip-twig')) {
myTooltip.show();
// show tooltip if it was toggled
if (window.localStorage.getItem(storageName)) {
myTooltip.toggle();
}

document.getElementById('my-dismissible-button').addEventListener('click', () => {
myTooltip.show();
window.localStorage.removeItem('my-tooltip-twig');
});
// tooltip trigger button
document.getElementById(buttonId).addEventListener('click', () => {
const isToggled = window.localStorage.getItem(storageName);
const isShown = myTooltip.isShown();

document
.getElementById('my-dismissible-tooltip2')
.querySelector('button')
.addEventListener('click', () => {
myTooltip.hide();
window.localStorage.setItem('my-tooltip-twig', 'true');
});
if (isToggled && !isShown) {
window.localStorage.removeItem(storageName);
} else {
window.localStorage.setItem(storageName, 'true');
}
});
27 changes: 14 additions & 13 deletions packages/web-twig/src/Resources/components/Tooltip/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,19 +139,20 @@ Advanced floating functionality is provided by JavaScript plugin and by [Floatin

#### API

| Attribute | Type | Default | Required | Description |
| ------------------------------- | -------------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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. |
| `flipFallbackPlacements` | `string` | - | ✕ | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"` |
| `id` | `string` | - | ✔ | Tooltip id |
| `isDismissible` | `bool` | false | ✕ | Make tooltip dismissible |
| `placement` | [Placement Dictionary][dictionary-placement] | "bottom" | ✕ | Placement of tooltip |
| Attribute | Type | Default | Required | Description |
| ------------------------------- | -------------------------------------------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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. |
| `flipFallbackPlacements` | `string` | - | ✕ | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"` |
| `id` | `string` | - | ✔ | Tooltip id |
| `isDismissible` | `bool` | false | ✕ | Make tooltip dismissible |
| `placement` | [Placement Dictionary][dictionary-placement] | "bottom" | ✕ | Placement of tooltip |
| `triggers` | string | "click, hover" | ✕ | How tooltip is triggered: click, hover. You may pass multiple triggers; separate them with a comma. |

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]
Expand Down
4 changes: 4 additions & 0 deletions packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 10 additions & 7 deletions packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
{# API #}
{%- set props = props | default([]) -%}
{%- set _closeLabel = props.closeLabel | default('Close') -%}
{%- set _id = props.id | default(null) -%}
{%- set _isDismissible = props.isDismissible | default(false) -%}
{%- set _enableControlledPlacement = props.enableControlledPlacement | default(false) -%}
{%- set _enableFlipping = props.enableFlipping | default(null) -%}
{%- set _enableFlippingCrossAxis = props.enableFlippingCrossAxis | default(null) -%}
{%- set _enableShifting = props.enableShifting | default(null) -%}
{%- set _enableSizing = props.enableSizing | default(null) -%}
{%- set _flipFallbackAxisSideDirection = props.flipFallbackAxisSideDirection | default(null) -%}
{%- set _flipFallbackPlacements = props.flipFallbackPlacements | default(null) -%}
{%- set _id = props.id | default(null) -%}
{%- set _isDismissible = props.isDismissible | default(false) -%}
{%- set _placement = props.placement | default('bottom') -%}
{%- set _trigger = props.trigger | default('click, hover') -%}

{# Class names #}
{%- set _arrowClassName = _spiritClassPrefix ~ 'Tooltip__arrow' -%}
Expand All @@ -24,17 +25,18 @@
{%- set _enableShiftingValue = _enableShifting ? 'true' : 'false' -%}
{%- set _enableSizingValue = _enableSizing ? 'true' : 'false' -%}

{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
{%- set _ariaControlsAttr = _id ? 'aria-controls="' ~ _id | escape('html_attr') ~ '"' : null -%}
{%- set _dataPlacementAttr = _placement ? 'data-spirit-placement="' ~ _placement | escape('html_attr') ~ '"' : null -%}
{%- set _dataEnableControlledPlacement = _enableControlledPlacement ? 'data-spirit-placement-controlled' : null -%}
{%- set _dataEnableFlippingAttr = _enableFlipping and _enableControlledPlacement ? 'data-spirit-enable-flipping="' ~ _enableFlippingValue ~ '"' : null -%}
{%- set _dataEnableFlippingCrossAxisAttr = _enableFlippingCrossAxis and _enableControlledPlacement ? 'data-spirit-enable-flipping-cross-axis="' ~ _enableFlippingCrossAxisValue ~ '"' : null -%}
{%- set _dataFillFallbackAxisSideDirectionAttr = _flipFallbackAxisSideDirection and _enableControlledPlacement ? 'data-spirit-flip-fallback-axis-side-direction="' ~ _flipFallbackAxisSideDirection | escape('html_attr') ~ '"' : null -%}
{%- 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 _dataEnableControlledPlacement = _enableControlledPlacement ? 'data-spirit-placement-controlled' : null -%}
{%- set _dataFillFallbackAxisSideDirectionAttr = _flipFallbackAxisSideDirection and _enableControlledPlacement ? 'data-spirit-flip-fallback-axis-side-direction="' ~ _flipFallbackAxisSideDirection | escape('html_attr') ~ '"' : null -%}
{%- set _dataFlipFallbackPlacementsAttr = _flipFallbackPlacements and _enableControlledPlacement ? 'data-spirit-flip-fallback-placements="' ~ _flipFallbackPlacements | escape('html_attr') ~ '"' : null -%}
{%- set _dataPlacementAttr = _placement ? 'data-spirit-placement="' ~ _placement | escape('html_attr') ~ '"' : null -%}
{%- set _dataTargetAttr = _id ? 'data-spirit-target="#' ~ _id | escape('html_attr') ~ '"' : null -%}
{%- set _dataTriggerAttr = _enableControlledPlacement ? 'data-spirit-trigger="' ~ _trigger ~ '"' : null -%}
{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
Expand All @@ -54,6 +56,7 @@
{{ _dataFlipFallbackPlacementsAttr | raw }}
{{ _dataEnableShiftingAttr | raw }}
{{ _dataEnableSizingAttr | raw }}
{{ _dataTriggerAttr | raw }}
>
{% block content %}{% endblock %}
{% if _isDismissible == 'true' %}
Expand Down
10 changes: 8 additions & 2 deletions packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissibleViaJS.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@
</p>

<TooltipWrapper UNSAFE_className="spirit-feature-tooltip-enable-data-placement d-inline-block">
<Button id="my-dismissible-button" aria-describedby="my-dismissible-tooltip-2">I have a tooltip 😎</Button>
<Button
id="my-dismissible-button"
aria-describedby="my-dismissible-tooltip-with-floating-ui" data-spirit-target="#my-dismissible-tooltip-with-floating-ui"
>
I have a tooltip 😎
</Button>
<TooltipPopover
id="my-dismissible-tooltip-2"
id="my-dismissible-tooltip-with-floating-ui"
placement="right"
isDismissible
UNSAFE_className="is-hidden"
enableControlledPlacement
flipFallbackPlacements="right, top-end"
trigger="click"
>
Close me
</TooltipPopover>
Expand Down
18 changes: 18 additions & 0 deletions packages/web-twig/src/Resources/components/Tooltip/stories/TooltipEnableHover.twig
View file
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/Tooltip/stories/TooltipIcon.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@
Close me
</TooltipPopov>
</TooltipWrapper>
</span>
</span>

0 comments on commit 66758dc

Please sign in to comment.