diff --git a/src/components/views/elements/InteractiveTooltip.js b/src/components/views/elements/InteractiveTooltip.js index 90cd1a775d..41d66ae629 100644 --- a/src/components/views/elements/InteractiveTooltip.js +++ b/src/components/views/elements/InteractiveTooltip.js @@ -37,10 +37,9 @@ function getOrCreateContainer() { return container; } -function isInRect(x, y, rect, { buffer = 0 } = {}) { +function isInRect(x, y, rect) { const { top, right, bottom, left } = rect; - return x >= (left - buffer) && x <= (right + buffer) - && y >= (top - buffer) && y <= (bottom + buffer); + return x >= left && x <= right && y >= top && y <= bottom; } /** @@ -163,14 +162,17 @@ export default class InteractiveTooltip extends React.Component { // // As long as the mouse remains inside the safe area, the tooltip will // stay open. - const buffer = 10; - if ( - isInRect(x, y, contentRect, { buffer }) || - isInRect(x, y, targetRect) - ) { + const buffer = 50; + if (isInRect(x, y, targetRect)) { return; } if (this.canTooltipFitAboveTarget()) { + const contentRectWithBuffer = { + top: contentRect.top - buffer, + right: contentRect.right + buffer, + bottom: contentRect.bottom, + left: contentRect.left - buffer, + }; const trapezoidLeft = { top: contentRect.bottom, right: targetRect.left, @@ -191,6 +193,7 @@ export default class InteractiveTooltip extends React.Component { }; if ( + isInRect(x, y, contentRectWithBuffer) || isInUpperRightHalf(x, y, trapezoidLeft) || isInRect(x, y, trapezoidCenter) || isInUpperLeftHalf(x, y, trapezoidRight) @@ -198,6 +201,12 @@ export default class InteractiveTooltip extends React.Component { return; } } else { + const contentRectWithBuffer = { + top: contentRect.top, + right: contentRect.right + buffer, + bottom: contentRect.bottom + buffer, + left: contentRect.left - buffer, + }; const trapezoidLeft = { top: targetRect.top, right: targetRect.left, @@ -218,6 +227,7 @@ export default class InteractiveTooltip extends React.Component { }; if ( + isInRect(x, y, contentRectWithBuffer) || isInLowerRightHalf(x, y, trapezoidLeft) || isInRect(x, y, trapezoidCenter) || isInLowerLeftHalf(x, y, trapezoidRight)