diff --git a/packages/web-twig/src/Resources/components/Tooltip/README.md b/packages/web-twig/src/Resources/components/Tooltip/README.md index 3dd176367e..d960f4ecbd 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/README.md +++ b/packages/web-twig/src/Resources/components/Tooltip/README.md @@ -54,11 +54,13 @@ yourself or you can use the prepared TooltipWrapper component: Please consult the [CSS implementation of Tooltip][tooltip] to help you pick the best positioning approach for your use case. -## Advanced floating functionality +## Advanced Floating Functionality To enable the advanced floating functionality, you need to have activated feature flag `spirit-feature-tooltip-enable-data-placement` on any parent element. This requirement will be removed in future major version. +For more info about feature flags, see main [README][readme-feature-flags]. + Advanced floating functionality is provided by JavaScript plugin and by [Floating UI][floating-ui] library. ## API @@ -68,7 +70,7 @@ Advanced floating functionality is provided by JavaScript plugin and by [Floatin | Name | Type | Default | Required | Description | | ------------------------------- | -------------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `closeLabel` | `string` | `Close` | ✕ | Close label | -| `enableControlledPlacement` | `bool` | false | ✕ | Enables ability to control Tooltip via external JavaScript like Tooltip JS plugin or custom script. | +| `enableControlledPlacement` | `bool` | false | ✕ | Enables ability to control Tooltip via external JavaScript like Tooltip JS plugin or custom script. This works only with the feature flag. | | `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 the main axis. For example `top-end` can be flipped to `top-start`. | | `enableShifting` | `bool` | true | ✕ | Enables [shifting][floating-ui-shift] of the element to keep it inside the boundary area by adjusting its position. | @@ -113,6 +115,7 @@ Or, feel free to write the controlling script yourself. [floating-ui-shift]: https://floating-ui.com/docs/shift [floating-ui-size]: https://floating-ui.com/docs/size [floating-ui]: https://floating-ui.com +[readme-feature-flags]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#feature-flags [tooltip]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tooltip [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Tooltip/README.md#javascript-api [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig index 90196fd575..3ed69ec57f 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig @@ -7,7 +7,7 @@ {%- set _enableFlipping = props.enableFlipping ?? true -%} {%- set _enableFlippingCrossAxis = props.enableFlippingCrossAxis ?? true -%} {%- set _enableShifting = props.enableShifting ?? true -%} -{%- set _enableSizing = props.placement ?? true -%} +{%- set _enableSizing = props.enableSizing ?? true -%} {%- set _flipFallbackAxisSideDirection = props.flipFallbackAxisSideDirection | default('none') -%} {%- set _flipFallbackPlacements = props.flipFallbackPlacements | default(null) -%} {%- set _placement = props.placement | default('bottom') -%} diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig index 72cfb94def..ca378c8109 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig @@ -21,7 +21,7 @@ -

With Floating UI and placement fallbacks

+

With Floating UI and Placement Fallbacks