Add onTooltipPress callback to various tooltip components

src/CONST.ts

@@ -4628,6 +4628,8 @@ const CONST = {
         TOOLBAR: 'toolbar',
         /** Use for navigation elements */
         NAVIGATION: 'navigation',
+        /** Use for Tooltips */
+        TOOLTIP: 'tooltip',
     },
     TRANSLATION_KEYS: {
         ATTACHMENT: 'common.attachment',

src/components/AnimatedPressableWithoutFeedback.tsx

@@ -0,0 +1,7 @@
+import Animated from 'react-native-reanimated';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+
+const AnimatedPressableWithoutFeedback = Animated.createAnimatedComponent(PressableWithoutFeedback);
+AnimatedPressableWithoutFeedback.displayName = 'AnimatedPressableWithoutFeedback';
+
+export default AnimatedPressableWithoutFeedback;

src/components/FloatingActionButton.tsx

@@ -128,6 +128,7 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
             renderTooltipContent={renderProductTrainingTooltip}
             wrapperStyle={styles.productTrainingTooltipWrapper}
             shouldHideOnNavigate={false}
+            onTooltipPress={toggleFabAction}
         >
             <PressableWithoutFeedback
                 ref={(el) => {

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -167,6 +167,17 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar;
     const firstIcon = optionItem.icons?.at(0);
 
+    const onOptionPress = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
+        Performance.markStart(CONST.TIMING.OPEN_REPORT);
+        Timing.start(CONST.TIMING.OPEN_REPORT);
+
+        event?.preventDefault();
+        // Enable Composer to focus on clicking the same chat after opening the context menu.
+        ReportActionComposeFocusManager.focus();
+        hideProductTrainingTooltip();
+        onSelectRow(optionItem, popoverAnchor);
+    };
+
     return (
         <OfflineWithFeedback
             pendingAction={optionItem.pendingAction}
@@ -185,22 +196,14 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                 shiftHorizontal={shouldShowWokspaceChatTooltip ? variables.workspaceLHNtooltipShiftHorizontal : variables.gbrTooltipShiftHorizontal}
                 shiftVertical={shouldShowWokspaceChatTooltip ? 0 : variables.composerTooltipShiftVertical}
                 wrapperStyle={styles.productTrainingTooltipWrapper}
+                onTooltipPress={onOptionPress}
             >
                 <View>
                     <Hoverable>
                         {(hovered) => (
                             <PressableWithSecondaryInteraction
                                 ref={popoverAnchor}
-                                onPress={(event) => {
-                                    Performance.markStart(CONST.TIMING.OPEN_REPORT);
-                                    Timing.start(CONST.TIMING.OPEN_REPORT);
-
-                                    event?.preventDefault();
-                                    // Enable Composer to focus on clicking the same chat after opening the context menu.
-                                    ReportActionComposeFocusManager.focus();
-                                    hideProductTrainingTooltip();
-                                    onSelectRow(optionItem, popoverAnchor);
-                                }}
+                                onPress={onOptionPress}
                                 onMouseDown={(event) => {
                                     // Allow composer blur on right click
                                     if (!event) {

src/components/MenuItem.tsx

@@ -10,12 +10,12 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
 import Parser from '@libs/Parser';
 import type {AvatarSource} from '@libs/UserUtils';
 import variables from '@styles/variables';
-import * as Session from '@userActions/Session';
+import {checkIfActionIsAllowed} from '@userActions/Session';
 import CONST from '@src/CONST';
 import type {Icon as IconType} from '@src/types/onyx/OnyxCommon';
 import type {TooltipAnchorAlignment} from '@src/types/utils/AnchorAlignment';
@@ -335,6 +335,9 @@ type MenuItemBaseProps = {
     /** Render custom content inside the tooltip. */
     renderTooltipContent?: () => ReactNode;
 
+    /** Callback to fire when the education tooltip is pressed */
+    onEducationTooltipPress?: () => void;
+
     shouldShowLoadingSpinnerIcon?: boolean;
 
     /** Should selected item be marked with checkmark */
@@ -459,6 +462,7 @@ function MenuItem(
         tooltipShiftHorizontal = 0,
         tooltipShiftVertical = 0,
         renderTooltipContent,
+        onEducationTooltipPress,
         additionalIconStyles,
         shouldShowSelectedItemCheck = false,
         shouldIconUseAutoWidthStyle = false,
@@ -601,13 +605,14 @@ function MenuItem(
                 shiftHorizontal={tooltipShiftHorizontal}
                 shiftVertical={tooltipShiftVertical}
                 shouldTeleportPortalToModalLayer={shouldTeleportPortalToModalLayer}
+                onTooltipPress={onEducationTooltipPress}
             >
                 <View>
                     <Hoverable>
                         {(isHovered) => (
                             <PressableWithSecondaryInteraction
-                                onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
-                                onPressIn={() => shouldBlockSelection && shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                                onPress={shouldCheckActionAllowedOnPress ? checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
+                                onPressIn={() => shouldBlockSelection && shouldUseNarrowLayout && canUseTouchScreen() && ControlSelection.block()}
                                 onPressOut={ControlSelection.unblock}
                                 onSecondaryInteraction={onSecondaryInteraction}
                                 wrapperStyle={outerWrapperStyle}

src/components/PopoverProvider/index.native.tsx

@@ -6,6 +6,7 @@ const PopoverContext = React.createContext<PopoverContextValue>({
     popover: null,
     close: () => {},
     isOpen: false,
+    setActivePopoverExtraAnchorRef: () => {},
 });
 
 function PopoverContextProvider(props: PopoverContextProps) {
@@ -15,6 +16,7 @@ function PopoverContextProvider(props: PopoverContextProps) {
             close: () => {},
             popover: null,
             isOpen: false,
+            setActivePopoverExtraAnchorRef: () => {},
         }),
         [],
     );

src/components/PopoverProvider/index.tsx

@@ -10,6 +10,7 @@ const PopoverContext = createContext<PopoverContextValue>({
     popoverAnchor: null,
     close: () => {},
     isOpen: false,
+    setActivePopoverExtraAnchorRef: () => {},
 });
 
 function elementContains(ref: RefObject<View | HTMLElement | Text> | undefined, target: EventTarget | null) {
@@ -23,6 +24,7 @@ function PopoverContextProvider(props: PopoverContextProps) {
     const [isOpen, setIsOpen] = useState(false);
     const activePopoverRef = useRef<AnchorRef | null>(null);
     const [activePopoverAnchor, setActivePopoverAnchor] = useState<AnchorRef['anchorRef']['current']>(null);
+    const [activePopoverExtraAnchorRefs, setActivePopoverExtraAnchorRefs] = useState<AnchorRef['extraAnchorRefs']>([]);
 
     const closePopover = useCallback((anchorRef?: RefObject<View | HTMLElement | Text>): boolean => {
         if (!activePopoverRef.current || (anchorRef && anchorRef !== activePopoverRef.current.anchorRef)) {
@@ -41,14 +43,17 @@ function PopoverContextProvider(props: PopoverContextProps) {
             if (elementContains(activePopoverRef.current?.ref, e.target) || elementContains(activePopoverRef.current?.anchorRef, e.target)) {
                 return;
             }
+            if (activePopoverExtraAnchorRefs?.some((ref: RefObject<View | HTMLElement | Text>) => elementContains(ref, e.target))) {
+                return;
+            }
             const ref = activePopoverRef.current?.anchorRef;
             closePopover(ref);
         };
         document.addEventListener('click', listener, true);
         return () => {
             document.removeEventListener('click', listener, true);
         };
-    }, [closePopover]);
+    }, [closePopover, activePopoverExtraAnchorRefs]);
 
     useEffect(() => {
         const listener = (e: Event) => {
@@ -117,16 +122,33 @@ function PopoverContextProvider(props: PopoverContextProps) {
         [closePopover],
     );
 
+    const setActivePopoverExtraAnchorRef = useCallback((extraAnchorRef?: RefObject<View | HTMLDivElement | Text>) => {
+        if (!extraAnchorRef) {
+            return;
+        }
+        setActivePopoverExtraAnchorRefs((prev: AnchorRef['extraAnchorRefs']) => {
+            if (!prev) {
+                return [extraAnchorRef];
+            }
+
+            if (prev?.includes(extraAnchorRef)) {
+                return prev;
+            }
+            return [...prev, extraAnchorRef];
+        });
+    }, []);
+
     const contextValue = useMemo(
         () => ({
             onOpen,
+            setActivePopoverExtraAnchorRef,
             close: closePopover,
             // eslint-disable-next-line react-compiler/react-compiler
             popover: activePopoverRef.current,
             popoverAnchor: activePopoverAnchor,
             isOpen,
         }),
-        [onOpen, closePopover, isOpen, activePopoverAnchor],
+        [onOpen, closePopover, isOpen, activePopoverAnchor, setActivePopoverExtraAnchorRef],
     );
 
     return <PopoverContext.Provider value={contextValue}>{props.children}</PopoverContext.Provider>;

src/components/PopoverProvider/types.ts

@@ -12,12 +12,14 @@ type PopoverContextValue = {
     popoverAnchor?: AnchorRef['anchorRef']['current'];
     close: (anchorRef?: RefObject<View | HTMLDivElement | Text>) => void;
     isOpen: boolean;
+    setActivePopoverExtraAnchorRef: (ref?: RefObject<View | HTMLDivElement | Text>) => void;
 };
 
 type AnchorRef = {
     ref: RefObject<View | HTMLDivElement | Text>;
     close: (anchorRef?: RefObject<View | HTMLDivElement | Text>) => void;
     anchorRef: RefObject<View | HTMLDivElement | Text>;
+    extraAnchorRefs?: Array<RefObject<View | HTMLDivElement | Text>>;
 };
 
 export type {PopoverContextProps, PopoverContextValue, AnchorRef};

src/components/Search/SearchPageHeader.tsx

@@ -392,6 +392,7 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
                         shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
                         wrapperStyle={styles.productTrainingTooltipWrapper}
                         renderTooltipContent={renderProductTrainingTooltip}
+                        onTooltipPress={onFiltersButtonPress}
                     >
                         <Button
                             innerStyles={!isCannedQuery && [styles.searchRouterInputResults, styles.borderNone]}

src/components/ThreeDotsMenu/index.tsx

@@ -5,11 +5,13 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PopoverMenu from '@components/PopoverMenu';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Browser from '@libs/Browser';
+import {isMobile} from '@libs/Browser';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type ThreeDotsMenuProps from './types';
@@ -30,6 +32,8 @@ function ThreeDotsMenu({
     shouldSetModalVisibility = true,
     disabled = false,
     hideProductTrainingTooltip,
+    renderProductTrainingTooltipContent,
+    shouldShowProductTrainingTooltip = false,
 }: ThreeDotsMenuProps) {
     const [modal] = useOnyx(ONYXKEYS.MODAL);
 
@@ -55,31 +59,46 @@ function ThreeDotsMenu({
         hidePopoverMenu();
     }, [isBehindModal, isPopupMenuVisible]);
 
+    const onThreeDotsPress = () => {
+        if (isPopupMenuVisible) {
+            hidePopoverMenu();
+            return;
+        }
+        hideProductTrainingTooltip?.();
+        buttonRef.current?.blur();
+        showPopoverMenu();
+        if (onIconPress) {
+            onIconPress();
+        }
+    };
+
+    const TooltipToRender = shouldShowProductTrainingTooltip ? EducationalTooltip : Tooltip;
+    const tooltipProps = shouldShowProductTrainingTooltip
+        ? {
+              renderTooltipContent: renderProductTrainingTooltipContent,
+              shouldRender: shouldShowProductTrainingTooltip,
+              anchorAlignment: {
+                  horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                  vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+              },
+              shiftHorizontal: variables.savedSearchShiftHorizontal,
+              shiftVertical: variables.savedSearchShiftVertical,
+              wrapperStyle: [styles.mh4, styles.pv2, styles.productTrainingTooltipWrapper],
+              onTooltipPress: onThreeDotsPress,
+          }
+        : {text: translate(iconTooltip), shouldRender: true};
+
     return (
         <>
             <View>
-                <Tooltip
-                    text={translate(iconTooltip)}
-                    // We need to hide the extra "More" tooltip when we have an educational tooltip
-                    shouldRender={!hideProductTrainingTooltip}
-                >
+                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                <TooltipToRender {...tooltipProps}>
                     <PressableWithoutFeedback
-                        onPress={() => {
-                            if (isPopupMenuVisible) {
-                                hidePopoverMenu();
-                                return;
-                            }
-                            hideProductTrainingTooltip?.();
-                            buttonRef.current?.blur();
-                            showPopoverMenu();
-                            if (onIconPress) {
-                                onIconPress();
-                            }
-                        }}
+                        onPress={onThreeDotsPress}
                         disabled={disabled}
                         onMouseDown={(e) => {
                             /* Keep the focus state on mWeb like we did on the native apps. */
-                            if (!Browser.isMobile()) {
+                            if (!isMobile()) {
                                 return;
                             }
                             e.preventDefault();
@@ -94,7 +113,7 @@ function ThreeDotsMenu({
                             fill={iconFill ?? isPopupMenuVisible ? theme.success : theme.icon}
                         />
                     </PressableWithoutFeedback>
-                </Tooltip>
+                </TooltipToRender>
             </View>
             <PopoverMenu
                 onClose={hidePopoverMenu}

src/components/ThreeDotsMenu/types.ts

@@ -41,6 +41,12 @@ type ThreeDotsMenuProps = {
 
     /** Function to hide the product training tooltip */
     hideProductTrainingTooltip?: () => void;
+
+    /** Tooltip content to render */
+    renderProductTrainingTooltipContent?: () => React.JSX.Element;
+
+    /** Should we render the tooltip */
+    shouldShowProductTrainingTooltip?: boolean;
 };
 
 export default ThreeDotsMenuProps;

src/components/Tooltip/BaseGenericTooltip/index.native.tsx

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import type {View as RNView} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
+import AnimatedPressableWithoutFeedback from '@components/AnimatedPressableWithoutFeedback';
 import TransparentOverlay from '@components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay';
 import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -38,6 +39,7 @@ function BaseGenericTooltip({
     onHideTooltip = () => {},
     shouldTeleportPortalToModalLayer = false,
     isEducationTooltip = false,
+    onTooltipPress = () => {},
 }: BaseGenericTooltipProps) {
     // 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,
@@ -113,12 +115,17 @@ function BaseGenericTooltip({
         );
     }
 
+    const AnimatedWrapper = isEducationTooltip ? AnimatedPressableWithoutFeedback : Animated.View;
+
     return (
         <Portal hostName={shouldTeleportPortalToModalLayer ? 'modal' : undefined}>
             {shouldUseOverlay && <TransparentOverlay onPress={onHideTooltip} />}
-            <Animated.View
-                ref={rootWrapper}
+            <AnimatedWrapper
                 style={[rootWrapperStyle, animationStyle]}
+                ref={rootWrapper}
+                onPress={isEducationTooltip ? onTooltipPress : undefined}
+                role={isEducationTooltip ? CONST.ROLE.TOOLTIP : undefined}
+                accessibilityLabel={isEducationTooltip ? CONST.ROLE.TOOLTIP : undefined}
                 onLayout={(e) => {
                     const {height, width} = e.nativeEvent.layout;
                     if (height === wrapperMeasuredHeightAnimated.get()) {
@@ -137,7 +144,7 @@ function BaseGenericTooltip({
                 <View style={pointerWrapperStyle}>
                     <View style={pointerStyle} />
                 </View>
-            </Animated.View>
+            </AnimatedWrapper>
         </Portal>
     );
 }