Fix: Chat - Link in end of line displays tooltip over text and not on link

src/components/Hoverable/hoverablePropTypes.js

@@ -13,6 +13,12 @@ const propTypes = {
     /** Function that executes when the mouse leaves the children. */
     onHoverOut: PropTypes.func,
 
+    /** Direct pass-through of React's onMouseEnter event. */
+    onMouseEnter: PropTypes.func,
+
+    /** Direct pass-through of React's onMouseLeave event. */
+    onMouseLeave: PropTypes.func,
+
     /** Decides whether to handle the scroll behaviour to show hover once the scroll ends */
     shouldHandleScroll: PropTypes.bool,
 };

src/components/Hoverable/index.js

@@ -154,13 +154,21 @@ class Hoverable extends Component {
                 }
             },
             onMouseEnter: (el) => {
+                if (_.isFunction(this.props.onMouseEnter)) {
+                    this.props.onMouseEnter(el);
+                }
+
                 this.setIsHovered(true);
 
                 if (_.isFunction(child.props.onMouseEnter)) {
                     child.props.onMouseEnter(el);
                 }
             },
             onMouseLeave: (el) => {
+                if (_.isFunction(this.props.onMouseLeave)) {
+                    this.props.onMouseLeave(el);
+                }
+
                 this.setIsHovered(false);
 
                 if (_.isFunction(child.props.onMouseLeave)) {

src/components/Tooltip/index.js

@@ -13,6 +13,63 @@ import useWindowDimensions from '../../hooks/useWindowDimensions';
 
 const hasHoverSupport = DeviceCapabilities.hasHoverSupport();
 
+/**
+ * Choose the correct bounding box from the given list.
+ * This is a helper function for chooseBoundingBox below.
+ *
+ * @param {Element} bbs The bounding boxes of DOM element being hovered over.
+ * @param {number} clientX The X position from the MouseEvent.
+ * @param {number} clientY The Y position from the MouseEvent.
+ * @param {number} slop An allowed slop factor when searching for the bounding
+ * box. If the user is moving the mouse quickly we can end up getting a
+ * hover event with the position outside any of our bounding boxes. We retry
+ * with a small slop factor in that case, so if we have a bounding box close
+ * enough then we go with that.
+ * @return {DOMRect | null} The chosen bounding box. null if we failed to find
+ * a matching one, which can happen if the user is moving the mouse quickly
+ * and the onHoverOver event actually fires outside the element bounding box.
+ */
+function chooseBoundingBoxWithSlop(bbs, clientX, clientY, slop) {
+    for (let i = 0; i < bbs.length; i++) {
+        const bb = bbs[i];
+        if (bb.x - slop <= clientX && bb.x + bb.width + slop >= clientX && bb.y - slop <= clientY && bb.y + bb.height + slop >= clientY) {
+            return bb;
+        }
+    }
+    return null;
+}
+
+/**
+ * Choose the correct bounding box for the tooltip to be positioned against.
+ * This handles the case where the target is wrapped across two lines, and
+ * so we need to find the correct part (the one that the user is hovering
+ * over) and show the tooltip there.
+ *
+ * @param {Element} target The DOM element being hovered over.
+ * @param {number} clientX The X position from the MouseEvent.
+ * @param {number} clientY The Y position from the MouseEvent.
+ * @return {DOMRect} The chosen bounding box.
+ */
+function chooseBoundingBox(target, clientX, clientY) {
+    const bbs = target.getClientRects();
+    if (bbs.length === 1) {
+        return bbs[0];
+    }
+    let bb = chooseBoundingBoxWithSlop(bbs, clientX, clientY, 0);
+    if (bb) {
+        return bb;
+    }
+    // Retry with a slop factor, in case the user is moving the mouse quickly.
+    bb = chooseBoundingBoxWithSlop(bbs, clientX, clientY, 5);
+    if (bb) {
+        return bb;
+    }
+    // Fall back to the full bounding box if we failed to find a matching one.
+    // This could only happen if the user is moving the mouse very quickly
+    // and they got it outside our slop above.
+    return target.getBoundingClientRect();
+}
+
 /**
  * A component used to wrap an element intended for displaying a tooltip. The term "tooltip's target" refers to the
  * wrapped element, which, upon hover, triggers the tooltip to be shown.
@@ -43,6 +100,14 @@ function Tooltip(props) {
     const isAnimationCanceled = useRef(false);
     const prevText = usePrevious(text);
 
+    const target = useRef(null);
+    const initialMousePosition = useRef({x: 0, y: 0});
+
+    const updateTargetAndMousePosition = useCallback((e) => {
+        target.current = e.target;
+        initialMousePosition.current = {x: e.clientX, y: e.clientY};
+    }, []);
+
     /**
      * Display the tooltip in an animation.
      */
@@ -91,10 +156,15 @@ function Tooltip(props) {
         if (bounds.width === 0) {
             setIsRendered(false);
         }
-        setWrapperWidth(bounds.width);
-        setWrapperHeight(bounds.height);
-        setXOffset(bounds.x);
-        setYOffset(bounds.y);
+        // 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(target.current, initialMousePosition.current.x, initialMousePosition.current.y);
+        setWrapperWidth(betterBounds.width);
+        setWrapperHeight(betterBounds.height);
+        setXOffset(betterBounds.x);
+        setYOffset(betterBounds.y);
     };
 
     /**
@@ -152,6 +222,7 @@ function Tooltip(props) {
                 onBoundsChange={updateBounds}
             >
                 <Hoverable
+                    onMouseEnter={updateTargetAndMousePosition}
                     onHoverIn={showTooltip}
                     onHoverOut={hideTooltip}
                     shouldHandleScroll={props.shouldHandleScroll}