From 5d36268694c0ab5f5cffa747e801c66a16d3a252 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 6 Jun 2023 14:17:14 +0800 Subject: [PATCH 1/2] show tooltip below as soon as another element overlap the top edge --- src/styles/getTooltipStyles.js | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/src/styles/getTooltipStyles.js b/src/styles/getTooltipStyles.js index 8a4e11bad194..e3cc53d361d4 100644 --- a/src/styles/getTooltipStyles.js +++ b/src/styles/getTooltipStyles.js @@ -50,14 +50,14 @@ function computeHorizontalShift(windowWidth, xOffset, componentWidth, tooltipWid } /** - * Determines if there is an overlapping element at the top of both given coordinates. + * Determines if there is an overlapping element at the top of a given coordinate. * (targetCenterX, y) * | * v * _ _ _ _ _ * | | * | | - * (x, targetCenterY) -> | | + * | | * | | * |_ _ _ _ _| * @@ -67,37 +67,31 @@ function computeHorizontalShift(windowWidth, xOffset, componentWidth, tooltipWid * and the top edge of the wrapped component. * @param {Element} [tooltip] - The reference to the tooltip's root element * @param {Number} tooltipTargetWidth - The width of the tooltip's target - * @param {Number} tooltipTargetHeight - The height of the tooltip's target * @returns {Boolean} */ -function isOverlappingAtTop(xOffset, yOffset, tooltip, tooltipTargetWidth, tooltipTargetHeight) { +function isOverlappingAtTop(xOffset, yOffset, tooltip, tooltipTargetWidth) { if (typeof document.elementFromPoint !== 'function') { return false; } - // Use the x and y center position of the target to prevent wrong element - // returned by elementFromPoint in case the target has a border radius or is a multiline text. + // Use the x center position of the target to prevent wrong element returned by elementFromPoint + // in case the target has a border radius or is a multiline text. const targetCenterX = xOffset + tooltipTargetWidth / 2; - const targetCenterY = yOffset + tooltipTargetHeight / 2; const elementAtTargetCenterX = document.elementFromPoint(targetCenterX, yOffset); - const elementAtTargetCenterY = document.elementFromPoint(xOffset, targetCenterY); const tooltipRef = (tooltip && tooltip.current) || tooltip; // Ensure it's not the already rendered element of this very tooltip, so the tooltip doesn't try to "avoid" itself - if (!elementAtTargetCenterX || !elementAtTargetCenterY || (tooltipRef && (tooltipRef.contains(elementAtTargetCenterX) || tooltipRef.contains(elementAtTargetCenterY)))) { + if (!elementAtTargetCenterX || (tooltipRef && tooltipRef.contains(elementAtTargetCenterX))) { return false; } const rectAtTargetCenterX = elementAtTargetCenterX.getBoundingClientRect(); - const rectAtTargetCenterY = elementAtTargetCenterY.getBoundingClientRect(); // Ensure it's not overlapping with another element by checking if the yOffset is greater than the top of the element // and less than the bottom of the element const isOverlappingAtTargetCenterX = yOffset > rectAtTargetCenterX.top && yOffset < rectAtTargetCenterX.bottom; - const isOverlappingAtTargetCenterY = yOffset > rectAtTargetCenterY.top && yOffset < rectAtTargetCenterY.bottom; - // Return true only if both elementAtTargetCenterX and elementAtTargetCenterY overlap with another element - return isOverlappingAtTargetCenterX && isOverlappingAtTargetCenterY; + return isOverlappingAtTargetCenterX; } /** @@ -162,7 +156,7 @@ export default function getTooltipStyles( // If either a tooltip will try to render within GUTTER_WIDTH logical pixels of the top of the screen, // Or the wrapped component is overlapping at top-left with another element // we'll display it beneath its wrapped component rather than above it as usual. - shouldShowBelow = yOffset - tooltipHeight < GUTTER_WIDTH || isOverlappingAtTop(xOffset, yOffset, tooltip, tooltipTargetWidth, tooltipTargetHeight); + shouldShowBelow = yOffset - tooltipHeight < GUTTER_WIDTH || isOverlappingAtTop(xOffset, yOffset, tooltip, tooltipTargetWidth); // When the tooltip size is ready, we can start animating the scale. scale = currentSize; From 336f951515f0ebac8dc7285408a145d7cce15d75 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 6 Jun 2023 14:24:57 +0800 Subject: [PATCH 2/2] update comment --- src/styles/getTooltipStyles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/getTooltipStyles.js b/src/styles/getTooltipStyles.js index e3cc53d361d4..b8c741d67934 100644 --- a/src/styles/getTooltipStyles.js +++ b/src/styles/getTooltipStyles.js @@ -154,7 +154,7 @@ export default function getTooltipStyles( if (isTooltipSizeReady) { // Determine if the tooltip should display below the wrapped component. // If either a tooltip will try to render within GUTTER_WIDTH logical pixels of the top of the screen, - // Or the wrapped component is overlapping at top-left with another element + // Or the wrapped component is overlapping at top-center with another element // we'll display it beneath its wrapped component rather than above it as usual. shouldShowBelow = yOffset - tooltipHeight < GUTTER_WIDTH || isOverlappingAtTop(xOffset, yOffset, tooltip, tooltipTargetWidth);