diff --git a/packages/components/package.json b/packages/components/package.json index ab0302ecf5..4fa768a65d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -70,11 +70,12 @@ "license": "MPL-2.0", "dependencies": { "@duetds/date-picker": "1.2.0", - "@floating-ui/dom": "^0.5.4", + "@floating-ui/dom": "^1.2.8", "@stencil/core": "^2.17.0", "@telekom/design-tokens": "1.0.0-beta.10", "@telekom/scale-design-tokens": "^3.0.0-beta.143", - "classnames": "^2.2.6", + "classnames": "^2.2.6", + "composed-offset-position": "^0.0.4", "stencil-inline-svg": "^1.0.1" } } diff --git a/packages/components/src/components/tooltip/tooltip.css b/packages/components/src/components/tooltip/tooltip.css index 5dfbc0b689..d20175277b 100644 --- a/packages/components/src/components/tooltip/tooltip.css +++ b/packages/components/src/components/tooltip/tooltip.css @@ -19,6 +19,7 @@ --line-height: var(--telekom-typography-line-spacing-standard); --spacing: var(--telekom-spacing-composition-space-02) var(--telekom-spacing-composition-space-04); + --width: auto; /* arrow */ --arrow-size: 12px; @@ -34,12 +35,12 @@ --z-index: var(--scl-z-index-70); display: contents; - position: relative; box-sizing: border-box; } [part='tooltip'] { position: absolute; + width: var(--width); z-index: var(--z-index); top: 0; left: 0; diff --git a/packages/components/src/components/tooltip/tooltip.tsx b/packages/components/src/components/tooltip/tooltip.tsx index c4e5491899..b10f0cf310 100644 --- a/packages/components/src/components/tooltip/tooltip.tsx +++ b/packages/components/src/components/tooltip/tooltip.tsx @@ -22,7 +22,15 @@ import { State, Listen, } from '@stencil/core'; -import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom'; +import { + computePosition, + offset, + flip, + shift, + arrow, + platform, +} from '@floating-ui/dom'; +import { offsetParent } from 'composed-offset-position'; import { isClickOutside } from '../../utils/utils'; import statusNote from '../../utils/status-note'; @@ -161,6 +169,11 @@ export class Tooltip { arrow({ element: this.arrowEl, padding: this.arrowPadding }), shift({ crossAxis: true }), ], + platform: { + ...platform, + getOffsetParent: (element) => + platform.getOffsetParent(element, offsetParent), + }, } ); Object.assign(this.tooltipEl.style, { diff --git a/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx b/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx index e234397220..fdfd21b901 100644 --- a/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx +++ b/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx @@ -149,6 +149,7 @@ export const FocusTemplate = (args, { argTypes }) => ({ --line-height: var(--telekom-typography-line-spacing-standard); --spacing: var(--telekom-spacing-composition-space-02) var(--telekom-spacing-composition-space-04); + --width: auto; /* arrow */ --arrow-size: 12px; diff --git a/yarn.lock b/yarn.lock index 6df7c1aad3..b904652a56 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3533,17 +3533,25 @@ unique-filename "^1.1.1" which "^1.3.1" -"@floating-ui/core@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86" - integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg== +"@floating-ui/core@^1.4.2": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c" + integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg== + dependencies: + "@floating-ui/utils" "^0.1.3" -"@floating-ui/dom@^0.5.4": - version "0.5.4" - resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1" - integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg== +"@floating-ui/dom@^1.2.8": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa" + integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA== dependencies: - "@floating-ui/core" "^0.7.3" + "@floating-ui/core" "^1.4.2" + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/utils@^0.1.3": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== "@hapi/address@2.x.x": version "2.1.4" @@ -8479,6 +8487,11 @@ component-emitter@^1.2.1: resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz" integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg== +composed-offset-position@^0.0.4: + version "0.0.4" + resolved "https://registry.yarnpkg.com/composed-offset-position/-/composed-offset-position-0.0.4.tgz#ca8854abf15e3c235ecf4df125a27fe88af76ea4" + integrity sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw== + compressible@~2.0.16: version "2.0.18" resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"