Use BoundsObserver to keep tooltip over the wrapper

package.json

@@ -69,6 +69,7 @@
     "@react-navigation/drawer": "github:Expensify/react-navigation#react-navigation-drawer-v6.5.0-alpha1-gitpkg",
     "@react-navigation/native": "6.0.13",
     "@react-navigation/stack": "6.3.1",
+    "@react-ng/bounds-observer": "^0.2.1",
     "@ua/react-native-airship": "^15.2.3",
     "awesome-phonenumber": "^5.4.0",
     "babel-plugin-transform-remove-console": "^6.9.4",

src/components/Tooltip/TooltipRenderedOnPageBody.js

@@ -20,11 +20,11 @@ const propTypes = {
     /** The distance between the top of the wrapper view and the top of the window */
     yOffset: PropTypes.number.isRequired,
 
-    /** The width of the tooltip wrapper */
-    wrapperWidth: PropTypes.number.isRequired,
+    /** The width of the tooltip's target wrapper */
+    targetWrapperWidth: PropTypes.number.isRequired,
 
-    /** The Height of the tooltip wrapper */
-    wrapperHeight: PropTypes.number.isRequired,
+    /** The height of the tooltip's target wrapper */
+    targetWrapperHeight: PropTypes.number.isRequired,
 
     /** Any additional amount to manually adjust the horizontal position of the tooltip.
     A positive value shifts the tooltip to the right, and a negative value shifts it to the left. */
@@ -63,9 +63,9 @@ const TooltipRenderedOnPageBody = (props) => {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
     // which prevents us from measuring it correctly.
-    const [tooltipContentWidth, setTooltipContentWidth] = useState(undefined);
-    const [tooltipWidth, setTooltipWidth] = useState(0);
-    const [tooltipHeight, setTooltipHeight] = useState(0);
+    const [contentMeasuredWidth, setContentMeasuredWidth] = useState(undefined);
+    const [wrapperMeasuredWidth, setWrapperMeasuredWidth] = useState(0);
+    const [wrapperMeasuredHeight, setWrapperMeasuredHeight] = useState(0);
     const contentRef = useRef();
     const wrapper = useRef();
 
@@ -81,38 +81,39 @@ const TooltipRenderedOnPageBody = (props) => {
         // because of the late update of the width and the height from onLayout.
         const rect = wrapper.current.getBoundingClientRect();
 
-        setTooltipWidth(rect.width);
-        setTooltipHeight(rect.height);
-        setTooltipContentWidth(contentRef.current.offsetWidth);
+        setWrapperMeasuredWidth(rect.width);
+        setWrapperMeasuredHeight(rect.height);
+        setContentMeasuredWidth(contentRef.current.offsetWidth);
     }, []);
 
-    const {animationStyle, tooltipWrapperStyle, tooltipTextStyle, pointerWrapperStyle, pointerStyle} = useMemo(
+    const {animationStyle, wrapperStyle, textStyle, pointerWrapperStyle, pointerStyle} = useMemo(
         () =>
             getTooltipStyles(
                 props.animation,
                 props.windowWidth,
                 props.xOffset,
                 props.yOffset,
-                props.wrapperWidth,
-                props.wrapperHeight,
+                props.targetWrapperWidth,
+                props.targetWrapperHeight,
                 props.maxWidth,
-                tooltipWidth,
-                tooltipHeight,
-                tooltipContentWidth,
+                wrapperMeasuredWidth,
+                wrapperMeasuredHeight,
+                contentMeasuredWidth,
                 props.shiftHorizontal,
                 props.shiftVertical,
+                wrapper.current,
             ),
         [
             props.animation,
             props.windowWidth,
             props.xOffset,
             props.yOffset,
-            props.wrapperWidth,
-            props.wrapperHeight,
+            props.targetWrapperWidth,
+            props.targetWrapperHeight,
             props.maxWidth,
-            tooltipWidth,
-            tooltipHeight,
-            tooltipContentWidth,
+            wrapperMeasuredWidth,
+            wrapperMeasuredHeight,
+            contentMeasuredWidth,
             props.shiftHorizontal,
             props.shiftVertical,
         ],
@@ -125,10 +126,10 @@ const TooltipRenderedOnPageBody = (props) => {
         content = (
             <Text
                 numberOfLines={props.numberOfLines}
-                style={tooltipTextStyle}
+                style={textStyle}
             >
                 <Text
-                    style={tooltipTextStyle}
+                    style={textStyle}
                     ref={contentRef}
                 >
                     {props.text}
@@ -140,7 +141,7 @@ const TooltipRenderedOnPageBody = (props) => {
     return ReactDOM.createPortal(
         <Animated.View
             ref={wrapper}
-            style={[tooltipWrapperStyle, animationStyle]}
+            style={[wrapperStyle, animationStyle]}
         >
             {content}
             <View style={pointerWrapperStyle}>