reset tooltip position on scroll

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -15,6 +15,7 @@ import useLHNEstimatedListSize from '@hooks/useLHNEstimatedListSize';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useScrollEventEmitter from '@hooks/useScrollEventEmitter';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isValidDraftComment} from '@libs/DraftCommentUtils';
@@ -68,6 +69,10 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
         onFirstItemRendered();
     }, [onFirstItemRendered]);
 
+    // Controls the visibility of the educational tooltip based on user scrolling.
+    // Hides the tooltip when the user is scrolling and displays it once scrolling stops.
+    const triggerScrollEvent = useScrollEventEmitter();
+
     const emptyLHNSubtitle = useMemo(
         () => (
             <View style={[styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter]}>
@@ -262,8 +267,9 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
             if (isWebOrDesktop) {
                 saveScrollIndex(route, Math.floor(e.nativeEvent.contentOffset.y / estimatedItemSize));
             }
+            triggerScrollEvent();
         },
-        [estimatedItemSize, isWebOrDesktop, route, saveScrollIndex, saveScrollOffset],
+        [estimatedItemSize, isWebOrDesktop, route, saveScrollIndex, saveScrollOffset, triggerScrollEvent],
     );
 
     const onLayout = useCallback(() => {

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -198,6 +198,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                 shiftVertical={shouldShowWokspaceChatTooltip ? 0 : variables.composerTooltipShiftVertical}
                 wrapperStyle={styles.productTrainingTooltipWrapper}
                 onTooltipPress={onOptionPress}
+                shouldHideOnScroll
             >
                 <View>
                     <Hoverable>

src/components/Search/SearchPageHeader/SearchPageHeader.tsx

@@ -359,6 +359,7 @@ function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideS
                 wrapperStyle={styles.productTrainingTooltipWrapper}
                 renderTooltipContent={renderProductTrainingTooltip}
                 onTooltipPress={onFiltersButtonPress}
+                shouldHideOnScroll
             >
                 <Button
                     innerStyles={[styles.searchAutocompleteInputResults, styles.borderNone, styles.bgTransparent]}

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -1,27 +1,84 @@
 import {NavigationContext} from '@react-navigation/native';
-import React, {memo, useContext, useEffect, useRef, useState} from 'react';
-import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native';
+import React, {memo, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import type {LayoutRectangle, NativeMethods, NativeSyntheticEvent} from 'react-native';
+import {DeviceEventEmitter, Dimensions} from 'react-native';
 import GenericTooltip from '@components/Tooltip/GenericTooltip';
-import type {EducationalTooltipProps} from '@components/Tooltip/types';
-import measureTooltipCoordinate from './measureTooltipCoordinate';
+import type {EducationalTooltipProps, GenericTooltipState} from '@components/Tooltip/types';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import measureTooltipCoordinate, {getTooltipCoordinates} from './measureTooltipCoordinate';
 
 type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle; target: HTMLElement}>;
 
+type ScrollingEventData = {
+    isScrolling: boolean;
+};
 /**
  * A component used to wrap an element intended for displaying a tooltip.
  * This tooltip would show immediately without user's interaction and hide after 5 seconds.
  */
-function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNavigate = true, ...props}: EducationalTooltipProps) {
-    const hideTooltipRef = useRef<() => void>();
+function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNavigate = true, shouldHideOnScroll = false, ...props}: EducationalTooltipProps) {
+    const genericTooltipStateRef = useRef<GenericTooltipState>();
+    const tooltipElementRef = useRef<React.Component & Readonly<NativeMethods>>();
 
     const [shouldMeasure, setShouldMeasure] = useState(false);
     const show = useRef<() => void>();
 
     const navigator = useContext(NavigationContext);
+    const insets = useSafeAreaInsets();
+
+    const setTooltipPosition = useCallback(
+        (isScrolling: boolean) => {
+            if (!shouldHideOnScroll || !genericTooltipStateRef.current || !tooltipElementRef.current) {
+                return;
+            }
+
+            const {hideTooltip, showTooltip, updateTargetBounds} = genericTooltipStateRef.current;
+            if (isScrolling) {
+                hideTooltip();
+            } else {
+                getTooltipCoordinates(tooltipElementRef.current, (bounds) => {
+                    updateTargetBounds(bounds);
+                    const {y, height} = bounds;
+
+                    const offset = 10; // Tooltip hides when content moves 10px past header/footer.
+                    const dimensions = Dimensions.get('screen');
+                    const top = y - (insets.top || 0);
+                    const bottom = y + height + insets.bottom || 0;
+
+                    // Calculate the available space at the top, considering the header height and offset
+                    const availableHeightForTop = top - (variables.contentHeaderHeight - offset);
+
+                    // Calculate the total height available after accounting for the bottom tab and offset
+                    const availableHeightForBottom = dimensions.height - (bottom + variables.bottomTabHeight - offset);
+
+                    if (availableHeightForTop < 0 || availableHeightForBottom < 0) {
+                        hideTooltip();
+                    } else {
+                        showTooltip();
+                    }
+                });
+            }
+        },
+        [insets, shouldHideOnScroll],
+    );
+
+    useLayoutEffect(() => {
+        if (!shouldRender || !shouldHideOnScroll) {
+            return;
+        }
+        setTooltipPosition(false);
+        const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, ({isScrolling}: ScrollingEventData = {isScrolling: false}) => {
+            setTooltipPosition(isScrolling);
+        });
+
+        return () => scrollingListener.remove();
+    }, [shouldRender, shouldHideOnScroll, setTooltipPosition]);
 
     useEffect(() => {
         return () => {
-            hideTooltipRef.current?.();
+            genericTooltipStateRef.current?.hideTooltip();
         };
     }, []);
 
@@ -30,7 +87,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
             return;
         }
         if (!shouldRender) {
-            hideTooltipRef.current?.();
+            genericTooltipStateRef.current?.hideTooltip();
             return;
         }
         // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content.
@@ -50,7 +107,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
             if (!shouldHideOnNavigate) {
                 return;
             }
-            hideTooltipRef.current?.();
+            genericTooltipStateRef.current?.hideTooltip();
         });
         return unsubscribe;
     }, [navigator, shouldHideOnNavigate]);
@@ -63,16 +120,18 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
-            {({showTooltip, hideTooltip, updateTargetBounds}) => {
+            {(genericTooltipState) => {
+                const {updateTargetBounds, showTooltip} = genericTooltipState;
                 // eslint-disable-next-line react-compiler/react-compiler
-                hideTooltipRef.current = hideTooltip;
+                genericTooltipStateRef.current = genericTooltipState;
                 return React.cloneElement(children as React.ReactElement, {
                     onLayout: (e: LayoutChangeEventWithTarget) => {
                         if (!shouldMeasure) {
                             setShouldMeasure(true);
                         }
                         // e.target is specific to native, use e.nativeEvent.target on web instead
                         const target = e.target || e.nativeEvent.target;
+                        tooltipElementRef.current = target;
                         show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
                     },
                 });

src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts

@@ -7,3 +7,11 @@ export default function measureTooltipCoordinate(target: React.Component & Reado
         showTooltip();
     });
 }
+
+function getTooltipCoordinates(target: React.Component & Readonly<NativeMethods>, callback: (rect: LayoutRectangle) => void) {
+    return target?.measure((x, y, width, height, px, py) => {
+        callback({height, width, x: px, y: py});
+    });
+}
+
+export {getTooltipCoordinates};

src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts

@@ -7,3 +7,11 @@ export default function measureTooltipCoordinate(target: React.Component & Reado
         showTooltip();
     });
 }
+
+function getTooltipCoordinates(target: React.Component & Readonly<NativeMethods>, callback: (rect: LayoutRectangle) => void) {
+    return target?.measureInWindow((x, y, width, height) => {
+        callback({height, width, x, y});
+    });
+}
+
+export {getTooltipCoordinates};

src/components/Tooltip/types.ts

@@ -87,6 +87,9 @@ type EducationalTooltipProps = ChildrenProps &
 
         /** Whether the tooltip should hide when navigating */
         shouldHideOnNavigate?: boolean;
+
+        /** Whether the tooltip should hide during scrolling */
+        shouldHideOnScroll?: boolean;
     };
 
 type TooltipExtendedProps = (EducationalTooltipProps | TooltipProps) & {
@@ -95,4 +98,4 @@ type TooltipExtendedProps = (EducationalTooltipProps | TooltipProps) & {
 };
 
 export default TooltipProps;
-export type {EducationalTooltipProps, GenericTooltipProps, SharedTooltipProps, TooltipExtendedProps};
+export type {EducationalTooltipProps, GenericTooltipProps, SharedTooltipProps, TooltipExtendedProps, GenericTooltipState};

src/hooks/useScrollEventEmitter.ts

@@ -0,0 +1,49 @@
+import {useCallback, useEffect, useRef} from 'react';
+import {DeviceEventEmitter} from 'react-native';
+import CONST from '@src/CONST';
+
+/**
+ * This hook tracks scroll events and emits a "scrolling" event when scrolling starts and ends.
+ */
+const useScrollEventEmitter = () => {
+    const isScrollingRef = useRef<boolean>(false);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const triggerScrollEvent = useCallback(() => {
+        const emitScrolling = (isScrolling: boolean) => {
+            DeviceEventEmitter.emit(CONST.EVENTS.SCROLLING, {
+                isScrolling,
+            });
+        };
+
+        // Start emitting the scrolling event when the scroll begins
+        if (!isScrollingRef.current) {
+            emitScrolling(true);
+            isScrollingRef.current = true;
+        }
+
+        // End the scroll and emit after a brief timeout to detect the end of scrolling
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = setTimeout(() => {
+            emitScrolling(false);
+            isScrollingRef.current = false;
+        }, 250);
+    }, []);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (!timeoutRef.current) {
+                return;
+            }
+            clearTimeout(timeoutRef.current);
+        };
+    }, []);
+
+    return triggerScrollEvent;
+};
+
+export default useScrollEventEmitter;

src/pages/Search/SearchPageNarrow.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Animated, {clamp, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {clamp, runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import BottomTabBar from '@components/Navigation/BottomTabBar';
@@ -15,6 +15,7 @@ import SearchStatusBar from '@components/Search/SearchPageHeader/SearchStatusBar
 import type {SearchQueryJSON} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useScrollEventEmitter from '@hooks/useScrollEventEmitter';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -47,6 +48,10 @@ function SearchPageNarrow({queryJSON, policyID, searchName, shouldGroupByReports
     const {clearSelectedTransactions} = useSearchContext();
     const [searchRouterListVisible, setSearchRouterListVisible] = useState(false);
 
+    // Controls the visibility of the educational tooltip based on user scrolling.
+    // Hides the tooltip when the user is scrolling and displays it once scrolling stops.
+    const triggerScrollEvent = useScrollEventEmitter();
+
     const handleBackButtonPress = useCallback(() => {
         if (!selectionMode?.isEnabled) {
             return false;
@@ -65,6 +70,7 @@ function SearchPageNarrow({queryJSON, policyID, searchName, shouldGroupByReports
 
     const scrollHandler = useAnimatedScrollHandler({
         onScroll: (event) => {
+            runOnJS(triggerScrollEvent)();
             const {contentOffset, layoutMeasurement, contentSize} = event;
             if (windowHeight > contentSize.height) {
                 return;