From f21c41cc13e9ea2effb6c0bfca11e7911b829ae4 Mon Sep 17 00:00:00 2001
From: Ewan Mellor <commits@ewanmellor.org>
Date: Wed, 20 Sep 2023 18:46:42 -0700
Subject: [PATCH] Fix: Chat - Link in end of line displays tooltip over text
 and not on link

Changes from PR review:
  o  Reorder the callbacks from Hoverable.
  o  Remove a null check.
  o  Add a comment.
---
 src/components/Hoverable/index.js | 12 ++++++------
 src/components/Tooltip/index.js   |  7 ++++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js
index 621f0efa5a1d..610734b7dc2e 100644
--- a/src/components/Hoverable/index.js
+++ b/src/components/Hoverable/index.js
@@ -156,22 +156,22 @@ class Hoverable extends Component {
             onMouseEnter: (el) => {
                 this.setIsHovered(true);
 
-                if (_.isFunction(child.props.onMouseEnter)) {
-                    child.props.onMouseEnter(el);
-                }
                 if (_.isFunction(this.props.onMouseEnter)) {
                     this.props.onMouseEnter(el);
                 }
+                if (_.isFunction(child.props.onMouseEnter)) {
+                    child.props.onMouseEnter(el);
+                }
             },
             onMouseLeave: (el) => {
                 this.setIsHovered(false);
 
-                if (_.isFunction(child.props.onMouseLeave)) {
-                    child.props.onMouseLeave(el);
-                }
                 if (_.isFunction(this.props.onMouseLeave)) {
                     this.props.onMouseLeave(el);
                 }
+                if (_.isFunction(child.props.onMouseLeave)) {
+                    child.props.onMouseLeave(el);
+                }
             },
             onBlur: (el) => {
                 // Check if the blur event occurred due to clicking outside the element
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 1d9df55f063c..ea8a5b1f87e3 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -157,9 +157,10 @@ function Tooltip(props) {
             setIsRendered(false);
         }
         const t = target.current;
-        if (!t) {
-            return;
-        }
+        // Choose a bounding box for the tooltip to target.
+        // In the case when the target is a link that has wrapped onto
+        // multiple lines, we want to show the tooltip over the part
+        // of the link that the user is hovering over.
         const betterBounds = chooseBoundingBox(t, initialMousePosition.current.x, initialMousePosition.current.y);
         setWrapperWidth(betterBounds.width);
         setWrapperHeight(betterBounds.height);