From 344dc229b76ce59014fed52de7cd49c83fea4037 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 8 May 2025 19:31:00 +0800 Subject: [PATCH] don't shift when tooltip wrapper component is out of screen --- .../TooltipStyleUtils/computeHorizontalShift/index.ts | 8 +++++++- .../TooltipStyleUtils/computeHorizontalShift/types.ts | 2 +- src/styles/utils/generators/TooltipStyleUtils/index.ts | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/index.ts b/src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/index.ts index d4f3a9ca2049..f32c9c98ad1d 100644 --- a/src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/index.ts +++ b/src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/index.ts @@ -14,8 +14,14 @@ const GUTTER_WIDTH = variables.gutterWidth; * and the left edge of the wrapped component. * @param tooltipWidth - The width of the tooltip itself. */ -const computeHorizontalShift: ComputeHorizontalShift = (windowWidth, tooltipLeftEdge, tooltipWidth) => { +const computeHorizontalShift: ComputeHorizontalShift = (windowWidth, tooltipLeftEdge, tooltipWidth, tooltipWrapperLeft, tooltipWrapperWidth) => { const tooltipRightEdge = tooltipLeftEdge + tooltipWidth; + const tooltipWrapperRight = tooltipWrapperLeft + tooltipWrapperWidth; + + if (tooltipWrapperLeft < 0 || tooltipWrapperRight > windowWidth) { + return 0; + } + if (tooltipLeftEdge < GUTTER_WIDTH) { // Tooltip is in left gutter, shift right by a multiple of four. return roundToNearestMultipleOfFour(GUTTER_WIDTH - tooltipLeftEdge); diff --git a/src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/types.ts b/src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/types.ts index 892da822ebc6..a15be48da9be 100644 --- a/src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/types.ts +++ b/src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/types.ts @@ -1,4 +1,4 @@ -type ComputeHorizontalShift = (windowWidth: number, tooltipLeftEdge: number, componentWidth: number) => number; +type ComputeHorizontalShift = (windowWidth: number, tooltipLeftEdge: number, componentWidth: number, tooltipWrapperLeft: number, tooltipWrapperWidth: number) => number; // eslint-disable-next-line import/prefer-default-export export type {ComputeHorizontalShift}; diff --git a/src/styles/utils/generators/TooltipStyleUtils/index.ts b/src/styles/utils/generators/TooltipStyleUtils/index.ts index 53fe2429632c..05274b8595fe 100644 --- a/src/styles/utils/generators/TooltipStyleUtils/index.ts +++ b/src/styles/utils/generators/TooltipStyleUtils/index.ts @@ -208,7 +208,7 @@ const createTooltipStyleUtils: StyleUtilGenerator = ( // Determine if we need to shift the tooltip horizontally to prevent it // from displaying too near to the edge of the screen. - horizontalShift = computeHorizontalShift(windowWidth, rootWrapperLeft, tooltipWidth); + horizontalShift = computeHorizontalShift(windowWidth, rootWrapperLeft, tooltipWidth, xOffset, tooltipTargetWidth); // Add the horizontal shift (left or right) computed above to keep it out of the gutters. rootWrapperLeft += horizontalShift;