From dd94bf799d972c10b1e6a9e325d79f35d2c1bfb1 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 1 Jul 2019 17:47:30 +0100
Subject: [PATCH] Improve interactive tooltip hover behaviour

This gives the interactive tooltip a more natural hover behaviour by removing
the full screen div behind it. This allows the target button to keep its hover
state, for example.

This also removes the click to close behaviour, which was too easy to trigger
accidentally.

Fixes https://github.com/vector-im/riot-web/issues/10179
Fixes https://github.com/vector-im/riot-web/issues/10222
Fixes https://github.com/vector-im/riot-web/issues/10225
---
 res/css/views/elements/_InteractiveTooltip.scss  | 10 ----------
 .../views/elements/InteractiveTooltip.js         | 16 +++++++---------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss
index a3f5b6edc2..17a76436e8 100644
--- a/res/css/views/elements/_InteractiveTooltip.scss
+++ b/res/css/views/elements/_InteractiveTooltip.scss
@@ -19,16 +19,6 @@ limitations under the License.
     z-index: 5000;
 }
 
-.mx_InteractiveTooltip_background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 1.0;
-    z-index: 5000;
-}
-
 .mx_InteractiveTooltip {
     border-radius: 3px;
     background-color: $interactive-tooltip-bg-color;
diff --git a/src/components/views/elements/InteractiveTooltip.js b/src/components/views/elements/InteractiveTooltip.js
index 52d51e0b39..2847d72955 100644
--- a/src/components/views/elements/InteractiveTooltip.js
+++ b/src/components/views/elements/InteractiveTooltip.js
@@ -74,6 +74,10 @@ export default class InteractiveTooltip extends React.Component {
         this.renderTooltip();
     }
 
+    componentWillUnmount() {
+        document.removeEventListener("mousemove", this.onMouseMove);
+    }
+
     collectContentRect = (element) => {
         // We don't need to clean up when unmounting, so ignore
         if (!element) return;
@@ -87,11 +91,7 @@ export default class InteractiveTooltip extends React.Component {
         this.target = element;
     }
 
-    onBackgroundClick = (ev) => {
-        this.hideTooltip();
-    }
-
-    onBackgroundMouseMove = (ev) => {
+    onMouseMove = (ev) => {
         const { clientX: x, clientY: y } = ev;
         const { contentRect } = this.state;
         const targetRect = this.target.getBoundingClientRect();
@@ -113,6 +113,7 @@ export default class InteractiveTooltip extends React.Component {
         if (this.props.onVisibilityChange) {
             this.props.onVisibilityChange(true);
         }
+        document.addEventListener("mousemove", this.onMouseMove);
     }
 
     hideTooltip() {
@@ -122,6 +123,7 @@ export default class InteractiveTooltip extends React.Component {
         if (this.props.onVisibilityChange) {
             this.props.onVisibilityChange(false);
         }
+        document.removeEventListener("mousemove", this.onMouseMove);
     }
 
     renderTooltip() {
@@ -168,10 +170,6 @@ export default class InteractiveTooltip extends React.Component {
         }
 
         const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}>
-            <div className="mx_ContextualMenu_background"
-                onMouseMove={this.onBackgroundMouseMove}
-                onClick={this.onBackgroundClick}
-            />
             <div className={menuClasses}
                 style={menuStyle}
                 ref={this.collectContentRect}