From f5fbd30a28f89d38c2323334c859375014b957ba Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 25 Jul 2019 12:17:07 +0100
Subject: [PATCH] Tweak interactive tooltip buffer area allow for overshoot

This uses a larger buffer area around the tooltip, as it easy to overshoot and
mouse the cursor past the tooltip.

Fixes https://github.com/vector-im/riot-web/issues/10400
---
 .../views/elements/InteractiveTooltip.js      | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

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)