From bcb7667ea04a5d9950baf8655147c115ce16f559 Mon Sep 17 00:00:00 2001 From: "Richard.Tarassov" Date: Wed, 18 Mar 2026 11:24:00 +0200 Subject: [PATCH 1/3] feat(tooltip): Add shift options to TooltipProviderProps Fixes #566 --- .../components/tooltip/tooltip-provider.tsx | 10 ++++++- .../components/tooltip/tooltip.stories.tsx | 30 +++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/src/community/components/tooltip/tooltip-provider.tsx b/src/community/components/tooltip/tooltip-provider.tsx index c93a1060b..444d708d7 100644 --- a/src/community/components/tooltip/tooltip-provider.tsx +++ b/src/community/components/tooltip/tooltip-provider.tsx @@ -10,6 +10,7 @@ import { ReferenceType, safePolygon, shift, + ShiftOptions, Strategy, useClick, useDismiss, @@ -77,6 +78,11 @@ export interface TooltipProviderProps { * @default GAP + ARROW_HEIGHT (3px + 7px) */ offset?: OffsetOptions; + /** + * Optional Floating UI shift configuration. + * Use this to keep tooltip content inside a specific visible area (for example by setting `boundary`). + */ + shift?: ShiftOptions; } export interface ITooltipContext { @@ -135,6 +141,7 @@ export const TooltipProvider = (props: TooltipProviderProps): JSX.Element => { onToggle, role = 'tooltip', offset: offsetOptions = DEFAULT_TOOLTIP_OFFSET, + shift: shiftOptions, } = props; const { order = ['reference', 'content'], @@ -164,7 +171,7 @@ export const TooltipProvider = (props: TooltipProviderProps): JSX.Element => { middleware: [ offset(offsetOptions), flip(), - shift({ padding: 8 }), + shift(shiftOptions), arrow({ element: arrowRef, padding: 4, @@ -184,6 +191,7 @@ export const TooltipProvider = (props: TooltipProviderProps): JSX.Element => { }), useRole(context, { role }), useDismiss(context, { + ancestorScroll: true, outsidePressEvent: openWith === 'click' ? 'mousedown' : 'pointerdown', // https://floating-ui.com/docs/dialog#interaction-hooks }), ]); diff --git a/src/community/components/tooltip/tooltip.stories.tsx b/src/community/components/tooltip/tooltip.stories.tsx index 132dab8b4..462e904fb 100644 --- a/src/community/components/tooltip/tooltip.stories.tsx +++ b/src/community/components/tooltip/tooltip.stories.tsx @@ -1,4 +1,5 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react'; +import { useState } from 'react'; import { Heading } from '../../../tedi/components/base//typography/heading/heading'; import { Icon } from '../../../tedi/components/base/icon/icon'; @@ -253,3 +254,32 @@ export const TooltipPosition: StoryFn = () => { ); }; + +export const ScrollableRowInCard: StoryFn = () => { + const [tooltipBoundary, setTooltipBoundary] = useState(); + const shiftOptions: TooltipProviderProps['shift'] = tooltipBoundary ? { boundary: tooltipBoundary } : undefined; + + return ( + + +
+
+ + + + Lorem ipsum dolor sit amet + + + Lorem ipsum dolor sit amet + +
+
+ + + ); +}; From 9db27e3b80e1264523871a10ba87b2033619a17e Mon Sep 17 00:00:00 2001 From: "Richard.Tarassov" Date: Wed, 18 Mar 2026 11:45:57 +0200 Subject: [PATCH 2/3] feat(tooltip): Add altBoundary: true to shift and remove shift prop from TooltipProviderProps Fixes #566 --- src/community/components/tooltip/tooltip-provider.tsx | 8 ++++---- src/community/components/tooltip/tooltip.stories.tsx | 8 ++------ 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/community/components/tooltip/tooltip-provider.tsx b/src/community/components/tooltip/tooltip-provider.tsx index 444d708d7..95b98f10c 100644 --- a/src/community/components/tooltip/tooltip-provider.tsx +++ b/src/community/components/tooltip/tooltip-provider.tsx @@ -10,7 +10,6 @@ import { ReferenceType, safePolygon, shift, - ShiftOptions, Strategy, useClick, useDismiss, @@ -82,7 +81,6 @@ export interface TooltipProviderProps { * Optional Floating UI shift configuration. * Use this to keep tooltip content inside a specific visible area (for example by setting `boundary`). */ - shift?: ShiftOptions; } export interface ITooltipContext { @@ -141,7 +139,6 @@ export const TooltipProvider = (props: TooltipProviderProps): JSX.Element => { onToggle, role = 'tooltip', offset: offsetOptions = DEFAULT_TOOLTIP_OFFSET, - shift: shiftOptions, } = props; const { order = ['reference', 'content'], @@ -171,7 +168,10 @@ export const TooltipProvider = (props: TooltipProviderProps): JSX.Element => { middleware: [ offset(offsetOptions), flip(), - shift(shiftOptions), + shift({ + altBoundary: true, + padding: 8, + }), arrow({ element: arrowRef, padding: 4, diff --git a/src/community/components/tooltip/tooltip.stories.tsx b/src/community/components/tooltip/tooltip.stories.tsx index 462e904fb..f399acec4 100644 --- a/src/community/components/tooltip/tooltip.stories.tsx +++ b/src/community/components/tooltip/tooltip.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react'; -import { useState } from 'react'; import { Heading } from '../../../tedi/components/base//typography/heading/heading'; import { Icon } from '../../../tedi/components/base/icon/icon'; @@ -256,15 +255,12 @@ export const TooltipPosition: StoryFn = () => { }; export const ScrollableRowInCard: StoryFn = () => { - const [tooltipBoundary, setTooltipBoundary] = useState(); - const shiftOptions: TooltipProviderProps['shift'] = tooltipBoundary ? { boundary: tooltipBoundary } : undefined; - return ( -
+
- + Date: Wed, 18 Mar 2026 11:49:37 +0200 Subject: [PATCH 3/3] feat(tooltip): Remove old comment Fixes #566 --- src/community/components/tooltip/tooltip-provider.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/community/components/tooltip/tooltip-provider.tsx b/src/community/components/tooltip/tooltip-provider.tsx index 95b98f10c..83346a08a 100644 --- a/src/community/components/tooltip/tooltip-provider.tsx +++ b/src/community/components/tooltip/tooltip-provider.tsx @@ -77,10 +77,6 @@ export interface TooltipProviderProps { * @default GAP + ARROW_HEIGHT (3px + 7px) */ offset?: OffsetOptions; - /** - * Optional Floating UI shift configuration. - * Use this to keep tooltip content inside a specific visible area (for example by setting `boundary`). - */ } export interface ITooltipContext {