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.
Expensify · Sep 21, 2023 · f21c41c · f21c41c
1 parent 36ef9c8
commit f21c41c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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);