From 8f09752207ee5e07cf8216c1bf14abb918a18ffd Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Wed, 9 Apr 2025 19:13:10 +0100
Subject: [PATCH 01/16] Add new tooltips

---
 src/CONST.ts                                  |  3 ++
 .../ProductTrainingContext/TOOLTIPS.ts        | 36 ++++++++++++++++++-
 .../ProductTrainingContext/index.tsx          | 14 +++++++-
 src/languages/en.ts                           | 12 +++++++
 src/languages/es.ts                           | 12 +++++++
 5 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 8ac06a52a8a5..a6016d9de418 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -6883,6 +6883,9 @@ const CONST = {
         SCAN_TEST_TOOLTIP: 'scanTestTooltip',
         SCAN_TEST_TOOLTIP_MANAGER: 'scanTestTooltipManager',
         SCAN_TEST_CONFIRMATION: 'scanTestConfirmation',
+        OUTSANDING_FILTER: 'outstandingFilter',
+        SETTINGS_TAB: 'settingsTab',
+        WORKSPACES_SETTINGS: 'workspacesSettings',
     },
     CHANGE_POLICY_TRAINING_MODAL: 'changePolicyModal',
     SMART_BANNER_HEIGHT: 152,
diff --git a/src/components/ProductTrainingContext/TOOLTIPS.ts b/src/components/ProductTrainingContext/TOOLTIPS.ts
index b0bed79b96e3..4e99672143bf 100644
--- a/src/components/ProductTrainingContext/TOOLTIPS.ts
+++ b/src/components/ProductTrainingContext/TOOLTIPS.ts
@@ -12,12 +12,16 @@ const {
     SCAN_TEST_TOOLTIP,
     SCAN_TEST_TOOLTIP_MANAGER,
     SCAN_TEST_CONFIRMATION,
+    OUTSANDING_FILTER,
+    SETTINGS_TAB,
+    WORKSPACES_SETTINGS,
 } = CONST.PRODUCT_TRAINING_TOOLTIP_NAMES;
 
 type ProductTrainingTooltipName = ValueOf<typeof CONST.PRODUCT_TRAINING_TOOLTIP_NAMES>;
 
 type ShouldShowConditionProps = {
-    shouldUseNarrowLayout?: boolean;
+    shouldUseNarrowLayout: boolean;
+    isUserPolicyAdmin: boolean;
 };
 
 type TooltipData = {
@@ -118,6 +122,36 @@ const TOOLTIPS: Record<ProductTrainingTooltipName, TooltipData> = {
         priority: 1100,
         shouldShow: () => true,
     },
+    [OUTSANDING_FILTER]: {
+        content: [
+            {text: 'productTrainingTooltip.outstandingFilter.part1', isBold: false},
+            {text: 'productTrainingTooltip.outstandingFilter.part2', isBold: true},
+        ],
+        onHideTooltip: () => dismissProductTraining(OUTSANDING_FILTER),
+        name: OUTSANDING_FILTER,
+        priority: 1925,
+        shouldShow: ({isUserPolicyAdmin}) => isUserPolicyAdmin,
+    },
+    [SETTINGS_TAB]: {
+        content: [
+            {text: 'productTrainingTooltip.settingsTab.part1', isBold: false},
+            {text: 'productTrainingTooltip.settingsTab.part2', isBold: true},
+        ],
+        onHideTooltip: () => dismissProductTraining(SETTINGS_TAB),
+        name: SETTINGS_TAB,
+        priority: 1750,
+        shouldShow: ({isUserPolicyAdmin}) => isUserPolicyAdmin,
+    },
+    [WORKSPACES_SETTINGS]: {
+        content: [
+            {text: 'productTrainingTooltip.workspacesSettings.part1', isBold: false},
+            {text: 'productTrainingTooltip.workspacesSettings.part2', isBold: true},
+        ],
+        onHideTooltip: () => dismissProductTraining(WORKSPACES_SETTINGS),
+        name: WORKSPACES_SETTINGS,
+        priority: 1550,
+        shouldShow: ({isUserPolicyAdmin}) => isUserPolicyAdmin,
+    },    
 };
 
 export default TOOLTIPS;
diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx
index c877e1d45fbc..4130d3a3f42b 100644
--- a/src/components/ProductTrainingContext/index.tsx
+++ b/src/components/ProductTrainingContext/index.tsx
@@ -18,6 +18,7 @@ import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import type {ProductTrainingTooltipName} from './TOOLTIPS';
 import TOOLTIPS from './TOOLTIPS';
+import { getActiveAdminWorkspaces } from '@libs/PolicyUtils';
 
 type ProductTrainingContextType = {
     shouldRenderTooltip: (tooltipName: ProductTrainingTooltipName) => boolean;
@@ -51,6 +52,16 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
         selector: hasCompletedGuidedSetupFlowSelector,
     });
 
+    const [allPolicies, allPoliciesMetadata] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [currentUserLogin, currentUserLoginMetadata] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email});
+
+    const isUserPolicyAdmin = useMemo(() => {
+        if (!allPolicies || !currentUserLogin || isLoadingOnyxValue(allPoliciesMetadata, currentUserLoginMetadata)) {
+            return false;
+        }
+        return getActiveAdminWorkspaces(allPolicies, currentUserLogin).length > 0;
+    }, [allPolicies, currentUserLogin, allPoliciesMetadata, currentUserLoginMetadata]);
+
     const [dismissedProductTraining] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
@@ -125,9 +136,10 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
 
             return tooltipConfig.shouldShow({
                 shouldUseNarrowLayout,
+                isUserPolicyAdmin,
             });
         },
-        [dismissedProductTraining, hasBeenAddedToNudgeMigration, isOnboardingCompleted, isOnboardingCompletedMetadata, shouldUseNarrowLayout, isModalVisible, isLoadingApp],
+        [dismissedProductTraining, hasBeenAddedToNudgeMigration, isOnboardingCompleted, isOnboardingCompletedMetadata, shouldUseNarrowLayout, isModalVisible, isLoadingApp, isUserPolicyAdmin],
     );
 
     const registerTooltip = useCallback(
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 66f9fc933f74..83d96e0009cf 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -6102,6 +6102,18 @@ const translations = {
             tryItOut: 'Try it out',
             noThanks: 'No thanks',
         },
+        outstandingFilter: {
+            part1: 'Filter for expenses that ',
+            part2: 'need approval',
+        },
+        settingsTab: {
+            part1: 'View your ',
+            part2: 'workspace and account settings',
+        },
+        workspacesSettings: {
+            part1: 'Explore your ',
+            part2: 'workspaces',
+        },
     },
     discardChangesConfirmation: {
         title: 'Discard changes?',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index a6388799c309..6a04edb43c62 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -6623,6 +6623,18 @@ const translations = {
             tryItOut: 'Prueba esto',
             noThanks: 'No, gracias',
         },
+        outstandingFilter: {
+            part1: 'Filter for expenses that ',
+            part2: 'need approval',
+        },
+        settingsTab: {
+            part1: 'Explore your ',
+            part2: 'workspace and account settings',
+        },
+        workspacesSettings: {
+            part1: 'Explore your ',
+            part2: 'workspaces',
+        },
     },
     discardChangesConfirmation: {
         title: '¿Descartar cambios?',

From a402e56357f0f0162e5e0e984c054fc42d5404c2 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Wed, 9 Apr 2025 19:19:22 +0100
Subject: [PATCH 02/16] add types

---
 src/types/onyx/DismissedProductTraining.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/types/onyx/DismissedProductTraining.ts b/src/types/onyx/DismissedProductTraining.ts
index d0bcdaebdc3e..6a45d01377de 100644
--- a/src/types/onyx/DismissedProductTraining.ts
+++ b/src/types/onyx/DismissedProductTraining.ts
@@ -9,6 +9,9 @@ const {
     SCAN_TEST_TOOLTIP,
     SCAN_TEST_TOOLTIP_MANAGER,
     SCAN_TEST_CONFIRMATION,
+    OUTSANDING_FILTER,
+    SETTINGS_TAB,
+    WORKSPACES_SETTINGS,
 } = CONST.PRODUCT_TRAINING_TOOLTIP_NAMES;
 /**
  * This type is used to store the timestamp of when the user dismisses a product training ui elements.
@@ -61,6 +64,20 @@ type DismissedProductTraining = {
      */
     [SCAN_TEST_CONFIRMATION]: string;
 
+    /**
+     * When user dismisses the outstanding filter product training tooltip, we store the timestamp here.
+     */
+    [OUTSANDING_FILTER]: string;
+
+    /**
+     * When user dismisses the settings tab product training tooltip, we store the timestamp here.
+     */
+    [SETTINGS_TAB]: string;
+    /**
+     * When user dismisses the workspaces settings product training tooltip, we store the timestamp here.
+     */
+    [WORKSPACES_SETTINGS]: string;
+
     /**
      * When user dismisses the ChangeReportPolicy feature training modal, we store the timestamp here.
      */

From 357ec91860a9f1058bee7740bd941403d739ee35 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Wed, 9 Apr 2025 19:19:30 +0100
Subject: [PATCH 03/16] prettier

---
 src/components/ProductTrainingContext/TOOLTIPS.ts |  2 +-
 src/components/ProductTrainingContext/index.tsx   | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/ProductTrainingContext/TOOLTIPS.ts b/src/components/ProductTrainingContext/TOOLTIPS.ts
index 4e99672143bf..db6b3c012ca8 100644
--- a/src/components/ProductTrainingContext/TOOLTIPS.ts
+++ b/src/components/ProductTrainingContext/TOOLTIPS.ts
@@ -151,7 +151,7 @@ const TOOLTIPS: Record<ProductTrainingTooltipName, TooltipData> = {
         name: WORKSPACES_SETTINGS,
         priority: 1550,
         shouldShow: ({isUserPolicyAdmin}) => isUserPolicyAdmin,
-    },    
+    },
 };
 
 export default TOOLTIPS;
diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx
index 4130d3a3f42b..96cf65ea65a4 100644
--- a/src/components/ProductTrainingContext/index.tsx
+++ b/src/components/ProductTrainingContext/index.tsx
@@ -12,13 +12,13 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {parseFSAttributes} from '@libs/Fullstory';
 import {hasCompletedGuidedSetupFlowSelector} from '@libs/onboardingSelectors';
+import {getActiveAdminWorkspaces} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import type {ProductTrainingTooltipName} from './TOOLTIPS';
 import TOOLTIPS from './TOOLTIPS';
-import { getActiveAdminWorkspaces } from '@libs/PolicyUtils';
 
 type ProductTrainingContextType = {
     shouldRenderTooltip: (tooltipName: ProductTrainingTooltipName) => boolean;
@@ -139,7 +139,16 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
                 isUserPolicyAdmin,
             });
         },
-        [dismissedProductTraining, hasBeenAddedToNudgeMigration, isOnboardingCompleted, isOnboardingCompletedMetadata, shouldUseNarrowLayout, isModalVisible, isLoadingApp, isUserPolicyAdmin],
+        [
+            dismissedProductTraining,
+            hasBeenAddedToNudgeMigration,
+            isOnboardingCompleted,
+            isOnboardingCompletedMetadata,
+            shouldUseNarrowLayout,
+            isModalVisible,
+            isLoadingApp,
+            isUserPolicyAdmin,
+        ],
     );
 
     const registerTooltip = useCallback(

From 1cfa4827ae1de109e66329b4eae5df9b9250133f Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Tue, 15 Apr 2025 18:45:02 +0100
Subject: [PATCH 04/16] update type

---
 src/types/onyx/DismissedProductTraining.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/types/onyx/DismissedProductTraining.ts b/src/types/onyx/DismissedProductTraining.ts
index 5018edf13802..465d7aee641b 100644
--- a/src/types/onyx/DismissedProductTraining.ts
+++ b/src/types/onyx/DismissedProductTraining.ts
@@ -78,16 +78,16 @@ type DismissedProductTraining = {
     /**
      * When user dismisses the outstanding filter product training tooltip, we store the timestamp here.
      */
-    [OUTSANDING_FILTER]: string;
+    [OUTSANDING_FILTER]: DismissedProductTrainingElement;
 
     /**
      * When user dismisses the settings tab product training tooltip, we store the timestamp here.
      */
-    [SETTINGS_TAB]: string;
+    [SETTINGS_TAB]: DismissedProductTrainingElement;
     /**
      * When user dismisses the workspaces settings product training tooltip, we store the timestamp here.
      */
-    [WORKSPACES_SETTINGS]: string;
+    [WORKSPACES_SETTINGS]: DismissedProductTrainingElement;
 
     /**
      * When user dismisses the ChangeReportPolicy feature training modal, we store the timestamp here.

From 88dd247096e8eec026f7a92f82b4d06d84010ceb Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 11:42:06 +0100
Subject: [PATCH 05/16] update translations

---
 src/languages/en.ts |  2 +-
 src/languages/es.ts | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index c0a498c6a4ca..512d6d2329fb 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -6245,7 +6245,7 @@ const translations = {
             noThanks: 'No thanks',
         },
         outstandingFilter: {
-            part1: 'Filter for expenses that ',
+            part1: 'Filter for expenses\nthat ',
             part2: 'need approval',
         },
         settingsTab: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
index cbc4f0cceeeb..3968d74c0adc 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -6770,16 +6770,16 @@ const translations = {
             noThanks: 'No, gracias',
         },
         outstandingFilter: {
-            part1: 'Filter for expenses that ',
-            part2: 'need approval',
+            part1: 'Filtra los gastos\nque ',
+            part2: 'necesitan aprobación',
         },
         settingsTab: {
-            part1: 'Explore your ',
-            part2: 'workspace and account settings',
+            part1: 'Explora ',
+            part2: 'tu espacio de trabajo y la configuración de tu cuenta',
         },
         workspacesSettings: {
-            part1: 'Explore your ',
-            part2: 'workspaces',
+            part1: 'Ver tus ',
+            part2: 'espacios de trabajo',
         },
     },
     discardChangesConfirmation: {

From 0671876d72c3dabe7923a6ed34f07ff6d4bf0d58 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 12:09:33 +0100
Subject: [PATCH 06/16] Add Outstanding filter tooltip

---
 .../SearchPageHeader/SearchStatusBar.tsx      | 83 ++++++++++++++-----
 .../BaseEducationalTooltip.tsx                | 17 +++-
 2 files changed, 77 insertions(+), 23 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchStatusBar.tsx b/src/components/Search/SearchPageHeader/SearchStatusBar.tsx
index c5334dac2b35..b6f3ccec4261 100644
--- a/src/components/Search/SearchPageHeader/SearchStatusBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchStatusBar.tsx
@@ -1,4 +1,5 @@
-import React, {useMemo, useRef} from 'react';
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView as RNScrollView, ViewStyle} from 'react-native';
@@ -7,13 +8,16 @@ import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import * as Expensicons from '@components/Icon/Expensicons';
+import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import ScrollView from '@components/ScrollView';
 import {useSearchContext} from '@components/Search/SearchContext';
 import type {ChatSearchStatus, ExpenseSearchStatus, InvoiceSearchStatus, SearchGroupBy, SearchQueryJSON, TripSearchStatus} from '@components/Search/types';
 import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton';
+import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useScrollEventEmitter from '@hooks/useScrollEventEmitter';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -229,6 +233,24 @@ function SearchStatusBar({queryJSON, onStatusChange, headerButtonsOptions}: Sear
     const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, {canBeMissing: false});
     const {isOffline} = useNetwork();
 
+    const [isScreenFocused, setIsScreenFocused] = useState(false);
+
+    useFocusEffect(
+        useCallback(() => {
+            setIsScreenFocused(true);
+            return () => {
+                setIsScreenFocused(false);
+            };
+        }, []),
+    );
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
+        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.OUTSANDING_FILTER,
+        isScreenFocused,
+    );
+    // 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 selectedTransactionsKeys = useMemo(() => Object.keys(selectedTransactions ?? {}), [selectedTransactions]);
     const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || (!!selectionMode && selectionMode.isEnabled));
 
@@ -279,9 +301,16 @@ function SearchStatusBar({queryJSON, onStatusChange, headerButtonsOptions}: Sear
                     ref={scrollRef}
                     horizontal
                     showsHorizontalScrollIndicator={false}
+                    onScroll={() => {
+                        triggerScrollEvent();
+                    }}
                 >
                     {options.map((item, index) => {
+                        const isOutstanding = item.status === CONST.SEARCH.STATUS.EXPENSE.OUTSTANDING;
                         const onPress = singleExecution(() => {
+                            if (isOutstanding) {
+                                hideProductTrainingTooltip();
+                            }
                             onStatusChange?.();
                             const query = buildSearchQueryString({...queryJSON, status: item.status});
                             Navigation.setParams({q: query});
@@ -291,27 +320,41 @@ function SearchStatusBar({queryJSON, onStatusChange, headerButtonsOptions}: Sear
                         const isLastItem = index === options.length - 1;
 
                         return (
-                            <Button
+                            <EducationalTooltip
                                 key={item.status}
-                                onLayout={(e) => {
-                                    if (!isActive || isScrolledRef.current || !('left' in e.nativeEvent.layout)) {
-                                        return;
-                                    }
-                                    isScrolledRef.current = true;
-                                    scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});
+                                shouldRender={isOutstanding && shouldShowProductTrainingTooltip}
+                                anchorAlignment={{
+                                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER,
+                                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                                 }}
-                                text={translate(item.text)}
-                                onPress={onPress}
-                                icon={item.icon}
-                                iconFill={isActive ? theme.success : undefined}
-                                iconHoverFill={theme.success}
-                                innerStyles={!isActive && styles.bgTransparent}
-                                hoverStyles={StyleUtils.getBackgroundColorStyle(!isActive ? theme.highlightBG : theme.border)}
-                                textStyles={!isActive && StyleUtils.getTextColorStyle(theme.textSupporting)}
-                                textHoverStyles={StyleUtils.getTextColorStyle(theme.text)}
-                                // We add padding to the first and last items so that they align with the header and table but can overflow outside the screen when scrolled.
-                                style={[isFirstItem && styles.pl5, isLastItem && styles.pr5]}
-                            />
+                                shiftHorizontal={0}
+                                renderTooltipContent={renderProductTrainingTooltip}
+                                wrapperStyle={styles.productTrainingTooltipWrapper}
+                                shouldHideOnScroll
+                                shouldHideOnNavigate={false}
+                                onTooltipPress={onPress}
+                            >
+                                <Button
+                                    onLayout={(e) => {
+                                        if (!isActive || isScrolledRef.current || !('left' in e.nativeEvent.layout)) {
+                                            return;
+                                        }
+                                        isScrolledRef.current = true;
+                                        scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});
+                                    }}
+                                    text={translate(item.text)}
+                                    onPress={onPress}
+                                    icon={item.icon}
+                                    iconFill={isActive ? theme.success : undefined}
+                                    iconHoverFill={theme.success}
+                                    innerStyles={!isActive && styles.bgTransparent}
+                                    hoverStyles={StyleUtils.getBackgroundColorStyle(!isActive ? theme.highlightBG : theme.border)}
+                                    textStyles={!isActive && StyleUtils.getTextColorStyle(theme.textSupporting)}
+                                    textHoverStyles={StyleUtils.getTextColorStyle(theme.text)}
+                                    // We add padding to the first and last items so that they align with the header and table but can overflow outside the screen when scrolled.
+                                    style={[isFirstItem && styles.pl5, isLastItem && styles.pr5]}
+                                />
+                            </EducationalTooltip>
                         );
                     })}
                 </ScrollView>
diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
index 493814fe0c1b..a9e8dec35e1e 100644
--- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
+++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
@@ -40,20 +40,31 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
 
         getTooltipCoordinates(tooltipElementRef.current, (bounds) => {
             updateTargetBounds(bounds);
-            const {y, height} = bounds;
+            const {x, y, width: elementWidth, height} = bounds;
 
             const offset = 10; // Tooltip hides when content moves 10px past header/footer.
             const dimensions = Dimensions.get('window');
             const top = y - (insets.top || 0);
             const bottom = y + height + insets.bottom || 0;
-
+            const left = x - (insets.left || 0);
+            const right = x + elementWidth + (insets.right || 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) {
+            // Calculate available horizontal space, taking into account safe-area insets
+            const availableWidthForLeft = left - offset;
+            const availableWidthForRight = dimensions.width - (right - offset);
+
+            // Hide if the element scrolled out vertically or horizontally
+            if (
+                availableHeightForTop < 0 ||
+                availableHeightForBottom < 0 ||
+                availableWidthForLeft < 0 ||
+                availableWidthForRight < 0
+            ) {
                 hideTooltip();
             } else {
                 showTooltip();

From ad548b65bfbb500d700494444a10ec7c16f030d5 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 12:20:32 +0100
Subject: [PATCH 07/16] Settings tab tooltip

---
 .../Navigation/NavigationTabBar/index.tsx     | 35 +++++++++-----
 src/languages/en.ts                           |  4 +-
 .../home/sidebar/NavigationTabBarAvatar.tsx   | 48 ++++++++++++++-----
 3 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/components/Navigation/NavigationTabBar/index.tsx b/src/components/Navigation/NavigationTabBar/index.tsx
index 21746f3972e0..d155d1d864c0 100644
--- a/src/components/Navigation/NavigationTabBar/index.tsx
+++ b/src/components/Navigation/NavigationTabBar/index.tsx
@@ -63,10 +63,16 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
     const [chatTabBrickRoad, setChatTabBrickRoad] = useState<BrickRoad>(undefined);
     const platform = getPlatform();
     const isWebOrDesktop = platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP;
-    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
-        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.BOTTOM_NAV_INBOX_TOOLTIP,
-        isTooltipAllowed && selectedTab !== NAVIGATION_TABS.HOME,
-    );
+    const {
+        renderProductTrainingTooltip: renderInboxTooltip,
+        shouldShowProductTrainingTooltip: shouldShowInboxTooltip,
+        hideProductTrainingTooltip: hideInboxTooltip,
+    } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.BOTTOM_NAV_INBOX_TOOLTIP, isTooltipAllowed && selectedTab !== NAVIGATION_TABS.HOME);
+    const {
+        renderProductTrainingTooltip: renderSettingsTooltip,
+        shouldShowProductTrainingTooltip: shouldShowSettingsTooltip,
+        hideProductTrainingTooltip: hideSettingsTooltip,
+    } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SETTINGS_TAB, isTooltipAllowed && selectedTab !== NAVIGATION_TABS.SETTINGS);
     const StyleUtils = useStyleUtils();
     const {canUseLeftHandBar} = usePermissions();
 
@@ -84,9 +90,9 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
             return;
         }
 
-        hideProductTrainingTooltip();
+        hideInboxTooltip();
         Navigation.navigate(ROUTES.HOME);
-    }, [hideProductTrainingTooltip, selectedTab]);
+    }, [hideInboxTooltip, selectedTab]);
 
     // When users do not have access to the leftHandBar beta, then we should take into account the activeWorkspaceID.
     // Since the introduction of LHB, the workspace switcher is no longer available.
@@ -133,6 +139,7 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
      * If the user clicks on the settings tab while on this tab, this button should go back to the previous screen within the tab.
      */
     const showSettingsPage = useCallback(() => {
+        hideSettingsTooltip();
         const rootState = navigationRef.getRootState();
         const topmostFullScreenRoute = rootState.routes.findLast((route) => isFullScreenName(route.name));
         if (!topmostFullScreenRoute) {
@@ -201,7 +208,7 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
             // Otherwise we should simply open the settings navigator.
             Navigation.navigate(ROUTES.SETTINGS);
         });
-    }, [shouldUseNarrowLayout]);
+    }, [hideSettingsTooltip, shouldUseNarrowLayout]);
 
     if (!shouldUseNarrowLayout && canUseLeftHandBar) {
         return (
@@ -230,13 +237,13 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
                             />
                         </PressableWithFeedback>
                         <EducationalTooltip
-                            shouldRender={shouldShowProductTrainingTooltip}
+                            shouldRender={shouldShowInboxTooltip}
                             anchorAlignment={{
                                 horizontal: isWebOrDesktop ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                                 vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                             }}
                             shiftHorizontal={isWebOrDesktop ? 0 : variables.navigationTabBarInboxTooltipShiftHorizontal}
-                            renderTooltipContent={renderProductTrainingTooltip}
+                            renderTooltipContent={renderInboxTooltip}
                             wrapperStyle={styles.productTrainingTooltipWrapper}
                             shouldHideOnNavigate={false}
                             onTooltipPress={navigateToChats}
@@ -303,6 +310,9 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
                             style={styles.leftNavigationTabBarItem}
                             isSelected={selectedTab === NAVIGATION_TABS.SETTINGS}
                             onPress={showSettingsPage}
+                            isWebOrDesktop={isWebOrDesktop}
+                            shouldShowTooltip={shouldShowSettingsTooltip}
+                            renderTooltipContent={renderSettingsTooltip}
                         />
                     </View>
                     <View style={styles.leftNavigationTabBarItem}>
@@ -324,13 +334,13 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
             )}
             <View style={styles.navigationTabBarContainer}>
                 <EducationalTooltip
-                    shouldRender={shouldShowProductTrainingTooltip}
+                    shouldRender={shouldShowInboxTooltip}
                     anchorAlignment={{
                         horizontal: isWebOrDesktop ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                     }}
                     shiftHorizontal={isWebOrDesktop ? 0 : variables.navigationTabBarInboxTooltipShiftHorizontal}
-                    renderTooltipContent={renderProductTrainingTooltip}
+                    renderTooltipContent={renderInboxTooltip}
                     wrapperStyle={styles.productTrainingTooltipWrapper}
                     shouldHideOnNavigate={false}
                     onTooltipPress={navigateToChats}
@@ -397,6 +407,9 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
                     style={styles.navigationTabBarItem}
                     isSelected={selectedTab === NAVIGATION_TABS.SETTINGS}
                     onPress={showSettingsPage}
+                    isWebOrDesktop={isWebOrDesktop}
+                    shouldShowTooltip={shouldShowSettingsTooltip}
+                    renderTooltipContent={renderSettingsTooltip}
                 />
                 <View style={[styles.flex1, styles.navigationTabBarItem]}>
                     <NavigationTabBarFloatingActionButton isTooltipAllowed={isTooltipAllowed} />
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 512d6d2329fb..7ea71e0a5007 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -6249,11 +6249,11 @@ const translations = {
             part2: 'need approval',
         },
         settingsTab: {
-            part1: 'View your ',
+            part1: 'Explore your ',
             part2: 'workspace and account settings',
         },
         workspacesSettings: {
-            part1: 'Explore your ',
+            part1: 'View your ',
             part2: 'workspaces',
         },
     },
diff --git a/src/pages/home/sidebar/NavigationTabBarAvatar.tsx b/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
index 8f5b4d8b488e..65f5812d843c 100644
--- a/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
+++ b/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
@@ -3,9 +3,11 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import {PressableWithFeedback} from '@components/Pressable';
 import Text from '@components/Text';
+import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AvatarWithDelegateAvatar from './AvatarWithDelegateAvatar';
@@ -21,9 +23,18 @@ type NavigationTabBarAvatarProps = {
 
     /** Additional styles to add to the button */
     style?: StyleProp<ViewStyle>;
+
+    /** Should tooltip be visible */
+    shouldShowTooltip: boolean;
+
+    /** Whether the layout is for Web/Desktop */
+    isWebOrDesktop: boolean;
+
+    /** Tooltip content to render */
+    renderTooltipContent: () => React.JSX.Element;
 };
 
-function NavigationTabBarAvatar({onPress, isSelected = false, style}: NavigationTabBarAvatarProps) {
+function NavigationTabBarAvatar({onPress, isSelected = false, style, shouldShowTooltip, isWebOrDesktop, renderTooltipContent}: NavigationTabBarAvatarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: false});
@@ -59,18 +70,31 @@ function NavigationTabBarAvatar({onPress, isSelected = false, style}: Navigation
     }
 
     return (
-        <PressableWithFeedback
-            onPress={onPress}
-            role={CONST.ROLE.BUTTON}
-            accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
-            wrapperStyle={styles.flex1}
-            style={style}
+        <EducationalTooltip
+            shouldRender={shouldShowTooltip}
+            anchorAlignment={{
+                horizontal: isWebOrDesktop ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+            }}
+            shiftHorizontal={isWebOrDesktop ? 0 : variables.navigationTabBarInboxTooltipShiftHorizontal}
+            renderTooltipContent={renderTooltipContent}
+            wrapperStyle={styles.productTrainingTooltipWrapper}
+            shouldHideOnNavigate={false}
+            onTooltipPress={onPress}
         >
-            {children}
-            <Text style={[styles.textSmall, styles.textAlignCenter, isSelected ? styles.textBold : styles.textSupporting, styles.mt0Half, styles.navigationTabBarLabel]}>
-                {translate('initialSettingsPage.account')}
-            </Text>
-        </PressableWithFeedback>
+            <PressableWithFeedback
+                onPress={onPress}
+                role={CONST.ROLE.BUTTON}
+                accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
+                wrapperStyle={styles.flex1}
+                style={style}
+            >
+                {children}
+                <Text style={[styles.textSmall, styles.textAlignCenter, isSelected ? styles.textBold : styles.textSupporting, styles.mt0Half, styles.navigationTabBarLabel]}>
+                    {translate('initialSettingsPage.account')}
+                </Text>
+            </PressableWithFeedback>
+        </EducationalTooltip>
     );
 }
 

From e2d0e4bb9d9555ff4c7c0a0ed36a35b7f854bc93 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 12:58:25 +0100
Subject: [PATCH 08/16] Workspaces settings tooltip

---
 src/pages/settings/InitialSettingsPage.tsx | 57 ++++++++++++++++++++--
 src/styles/variables.ts                    |  2 +
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index a747cac299ba..55083db5653f 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -16,6 +16,7 @@ import MenuItem from '@components/MenuItem';
 import NavigationTabBar from '@components/Navigation/NavigationTabBar';
 import NAVIGATION_TABS from '@components/Navigation/NavigationTabBar/NAVIGATION_TABS';
 import {PressableWithFeedback} from '@components/Pressable';
+import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import ScreenWrapper from '@components/ScreenWrapper';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
 import ScrollView from '@components/ScrollView';
@@ -78,6 +79,9 @@ type MenuData = {
     iconRight?: IconAsset;
     badgeText?: string;
     badgeStyle?: ViewStyle;
+    shouldRenderTooltip?: boolean;
+    renderTooltipContent?: () => React.JSX.Element;
+    onEducationTooltipPress?: () => void;
 };
 
 type Menu = {sectionStyle: StyleProp<ViewStyle>; sectionTranslationKey: TranslationPaths; items: MenuData[]};
@@ -105,6 +109,13 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
     const [allConnectionSyncProgresses] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}`, {canBeMissing: true});
     const {setRootStatusBarEnabled} = useContext(CustomStatusBarAndBackgroundContext);
     const {canUseLeftHandBar} = usePermissions();
+
+    const {
+        renderProductTrainingTooltip: renderWorkspaceSettingsTooltip,
+        shouldShowProductTrainingTooltip: shouldShowWorkspaceSettingsTooltip,
+        hideProductTrainingTooltip: hideWorkspaceSettingsTooltip,
+    } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.WORKSPACES_SETTINGS, true);
+
     const shouldDisplayLHB = !!canUseLeftHandBar && !shouldUseNarrowLayout;
 
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION, {canBeMissing: true});
@@ -182,6 +193,11 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
         return defaultMenu;
     }, [loginList, privatePersonalDetails, styles.accountSettingsSectionContainer, walletBrickRoadIndicator]);
 
+    const navigateToWorkspacesSettings = useCallback(() => {
+        hideWorkspaceSettingsTooltip();
+        Navigation.navigate(ROUTES.SETTINGS_WORKSPACES.route);
+    }, [hideWorkspaceSettingsTooltip]);
+
     /**
      * Retuns a list of menu items data for workspace section
      * @returns object with translationKey, style and items for the workspace section
@@ -193,7 +209,10 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                 icon: Expensicons.Buildings,
                 screenName: SCREENS.SETTINGS.WORKSPACES,
                 brickRoadIndicator: hasGlobalWorkspaceSettingsRBR(policies, allConnectionSyncProgresses) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
-                action: () => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES.route),
+                action: navigateToWorkspacesSettings,
+                shouldRenderTooltip: shouldShowWorkspaceSettingsTooltip,
+                renderTooltipContent: renderWorkspaceSettingsTooltip,
+                onEducationTooltipPress: navigateToWorkspacesSettings,
             },
             {
                 translationKey: 'allSettingsScreen.domains',
@@ -224,7 +243,18 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
             sectionTranslationKey: 'common.workspaces',
             items,
         };
-    }, [allConnectionSyncProgresses, freeTrialText, policies, privateSubscription?.errors, styles.badgeSuccess, styles.workspaceSettingsSectionContainer, subscriptionPlan]);
+    }, [
+        allConnectionSyncProgresses,
+        freeTrialText,
+        policies,
+        privateSubscription?.errors,
+        styles.badgeSuccess,
+        styles.workspaceSettingsSectionContainer,
+        subscriptionPlan,
+        navigateToWorkspacesSettings,
+        renderWorkspaceSettingsTooltip,
+        shouldShowWorkspaceSettingsTooltip,
+    ]);
 
     /**
      * Retuns a list of menu items data for general section
@@ -367,13 +397,34 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                                 iconRight={item.iconRight}
                                 shouldShowRightIcon={item.shouldShowRightIcon}
                                 shouldIconUseAutoWidthStyle
+                                shouldRenderTooltip={item.shouldRenderTooltip}
+                                renderTooltipContent={item.renderTooltipContent}
+                                onEducationTooltipPress={item.onEducationTooltipPress}
+                                tooltipAnchorAlignment={{
+                                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                                }}
+                                tooltipShiftHorizontal={variables.workspacesSettingsTooltipShiftHorizontal}
+                                tooltipShiftVertical={variables.workspacesSettingsTooltipShiftVertical}
+                                tooltipWrapperStyle={styles.productTrainingTooltipWrapper}
                             />
                         );
                     })}
                 </View>
             );
         },
-        [styles.pb4, styles.mh3, styles.sectionTitle, styles.sectionMenuItem, translate, userWallet?.currentBalance, focusedRouteName, isExecuting, singleExecution],
+        [
+            styles.pb4,
+            styles.mh3,
+            styles.sectionTitle,
+            styles.sectionMenuItem,
+            translate,
+            userWallet?.currentBalance,
+            focusedRouteName,
+            isExecuting,
+            singleExecution,
+            styles.productTrainingTooltipWrapper,
+        ],
     );
 
     const accountMenuItems = useMemo(() => getMenuItemsSection(accountMenuItemsData), [accountMenuItemsData, getMenuItemsSection]);
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index f2f0494763f7..3a52ecdc5ae9 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -278,6 +278,8 @@ export default {
     savedSearchShiftVertical: 6,
     navigationTabBarInboxTooltipShiftHorizontal: 36,
     expenseReportsTypeTooltipShiftHorizontal: 10,
+    workspacesSettingsTooltipShiftHorizontal: 8,
+    workspacesSettingsTooltipShiftVertical: -8,
 
     inlineImagePreviewMinSize: 64,
     inlineImagePreviewMaxSize: 148,

From 7190dce9e6716957dd43b2067da20dddc1e8b735 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 13:01:39 +0100
Subject: [PATCH 09/16] prettier

---
 .../Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx  | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
index a9e8dec35e1e..3075e7436ee9 100644
--- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
+++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
@@ -59,12 +59,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
             const availableWidthForRight = dimensions.width - (right - offset);
 
             // Hide if the element scrolled out vertically or horizontally
-            if (
-                availableHeightForTop < 0 ||
-                availableHeightForBottom < 0 ||
-                availableWidthForLeft < 0 ||
-                availableWidthForRight < 0
-            ) {
+            if (availableHeightForTop < 0 || availableHeightForBottom < 0 || availableWidthForLeft < 0 || availableWidthForRight < 0) {
                 hideTooltip();
             } else {
                 showTooltip();

From 7c4d09ef8abd28787d0208139ef7f67942e2def7 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 13:17:25 +0100
Subject: [PATCH 10/16] fix settings tab tooltip

---
 src/languages/en.ts                               | 2 +-
 src/languages/es.ts                               | 2 +-
 src/pages/home/sidebar/NavigationTabBarAvatar.tsx | 4 ++--
 src/styles/variables.ts                           | 1 +
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7ea71e0a5007..e81f70f9e487 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -6250,7 +6250,7 @@ const translations = {
         },
         settingsTab: {
             part1: 'Explore your ',
-            part2: 'workspace and account settings',
+            part2: 'workspace\nand account settings',
         },
         workspacesSettings: {
             part1: 'View your ',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 3968d74c0adc..dbc366255960 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -6775,7 +6775,7 @@ const translations = {
         },
         settingsTab: {
             part1: 'Explora ',
-            part2: 'tu espacio de trabajo y la configuración de tu cuenta',
+            part2: 'tu espacio de trabajo\ny la configuración de tu cuenta',
         },
         workspacesSettings: {
             part1: 'Ver tus ',
diff --git a/src/pages/home/sidebar/NavigationTabBarAvatar.tsx b/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
index 65f5812d843c..e5652c3fefaa 100644
--- a/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
+++ b/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
@@ -73,10 +73,10 @@ function NavigationTabBarAvatar({onPress, isSelected = false, style, shouldShowT
         <EducationalTooltip
             shouldRender={shouldShowTooltip}
             anchorAlignment={{
-                horizontal: isWebOrDesktop ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                horizontal: isWebOrDesktop ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                 vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
             }}
-            shiftHorizontal={isWebOrDesktop ? 0 : variables.navigationTabBarInboxTooltipShiftHorizontal}
+            shiftHorizontal={isWebOrDesktop ? 0 : variables.navigationTabBarSettingsTooltipShiftHorizontal}
             renderTooltipContent={renderTooltipContent}
             wrapperStyle={styles.productTrainingTooltipWrapper}
             shouldHideOnNavigate={false}
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 3a52ecdc5ae9..e41462eaabe2 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -277,6 +277,7 @@ export default {
     savedSearchShiftHorizontal: -10,
     savedSearchShiftVertical: 6,
     navigationTabBarInboxTooltipShiftHorizontal: 36,
+    navigationTabBarSettingsTooltipShiftHorizontal: -36,
     expenseReportsTypeTooltipShiftHorizontal: 10,
     workspacesSettingsTooltipShiftHorizontal: 8,
     workspacesSettingsTooltipShiftVertical: -8,

From f1fa820c3c6b62da00dfae59e6ecf0c0fb5ae858 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 13:17:56 +0100
Subject: [PATCH 11/16] Hide tooltip on scroll

---
 src/components/MenuItem.tsx                | 5 +++++
 src/pages/settings/InitialSettingsPage.tsx | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 61aac7d171ba..82df71b80d25 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -350,6 +350,9 @@ type MenuItemBaseProps = {
     /** Callback to fire when the education tooltip is pressed */
     onEducationTooltipPress?: () => void;
 
+    /** Whether the tooltip should hide on scroll */
+    shouldHideOnScroll?: boolean
+
     shouldShowLoadingSpinnerIcon?: boolean;
 
     /** Should selected item be marked with checkmark */
@@ -474,6 +477,7 @@ function MenuItem(
         onBlur,
         avatarID,
         shouldRenderTooltip = false,
+        shouldHideOnScroll = false,
         tooltipAnchorAlignment,
         tooltipWrapperStyle = {},
         tooltipShiftHorizontal = 0,
@@ -639,6 +643,7 @@ function MenuItem(
                 shiftVertical={tooltipShiftVertical}
                 shouldTeleportPortalToModalLayer={shouldTeleportPortalToModalLayer}
                 onTooltipPress={onEducationTooltipPress}
+                shouldHideOnScroll={shouldHideOnScroll}
             >
                 <View>
                     <Hoverable>
diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index 55083db5653f..6feeb09cae5c 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -28,6 +28,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useScrollEventEmitter from '@hooks/useScrollEventEmitter';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useSubscriptionPlan from '@hooks/useSubscriptionPlan';
 import useTheme from '@hooks/useTheme';
@@ -116,6 +117,10 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
         hideProductTrainingTooltip: hideWorkspaceSettingsTooltip,
     } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.WORKSPACES_SETTINGS, true);
 
+    // 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 shouldDisplayLHB = !!canUseLeftHandBar && !shouldUseNarrowLayout;
 
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION, {canBeMissing: true});
@@ -407,6 +412,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                                 tooltipShiftHorizontal={variables.workspacesSettingsTooltipShiftHorizontal}
                                 tooltipShiftVertical={variables.workspacesSettingsTooltipShiftVertical}
                                 tooltipWrapperStyle={styles.productTrainingTooltipWrapper}
+                                shouldHideOnScroll
                             />
                         );
                     })}
@@ -476,8 +482,9 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                 return;
             }
             saveScrollOffset(route, e.nativeEvent.contentOffset.y);
+            triggerScrollEvent();
         },
-        [route, saveScrollOffset],
+        [route, saveScrollOffset, triggerScrollEvent],
     );
 
     useLayoutEffect(() => {

From ab5b70094863e110094741e2052f4eeba595fca4 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 13:28:54 +0100
Subject: [PATCH 12/16] prettier

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 82df71b80d25..b5948b56fe79 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -351,7 +351,7 @@ type MenuItemBaseProps = {
     onEducationTooltipPress?: () => void;
 
     /** Whether the tooltip should hide on scroll */
-    shouldHideOnScroll?: boolean
+    shouldHideOnScroll?: boolean;
 
     shouldShowLoadingSpinnerIcon?: boolean;
 

From f318d727279a9a4faf886e16a970aa7ccb99fc58 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 13:52:48 +0100
Subject: [PATCH 13/16] Fix tests

---
 tests/navigation/GoBackTests.tsx         | 8 ++++++++
 tests/navigation/NavigateTests.tsx       | 8 ++++++++
 tests/navigation/SwitchPolicyIDTests.tsx | 8 ++++++++
 3 files changed, 24 insertions(+)

diff --git a/tests/navigation/GoBackTests.tsx b/tests/navigation/GoBackTests.tsx
index 0c7af7da4459..c28aefd44817 100644
--- a/tests/navigation/GoBackTests.tsx
+++ b/tests/navigation/GoBackTests.tsx
@@ -13,6 +13,14 @@ import TestNavigationContainer from '../utils/TestNavigationContainer';
 jest.mock('@hooks/useResponsiveLayout', () => jest.fn());
 jest.mock('@libs/getIsNarrowLayout', () => jest.fn());
 
+// Mock Fullstory library dependency
+jest.mock('@libs/Fullstory', () => ({
+    default: {
+        consentAndIdentify: jest.fn(),
+    },
+    parseFSAttributes: jest.fn(),
+}));
+
 jest.mock('@pages/home/sidebar/NavigationTabBarAvatar');
 jest.mock('@src/components/Navigation/TopLevelNavigationTabBar');
 jest.mock('@components/ConfirmedRoute.tsx');
diff --git a/tests/navigation/NavigateTests.tsx b/tests/navigation/NavigateTests.tsx
index f8e313de010a..b98ed157f8ff 100644
--- a/tests/navigation/NavigateTests.tsx
+++ b/tests/navigation/NavigateTests.tsx
@@ -13,6 +13,14 @@ import TestNavigationContainer from '../utils/TestNavigationContainer';
 jest.mock('@hooks/useResponsiveLayout', () => jest.fn());
 jest.mock('@libs/getIsNarrowLayout', () => jest.fn());
 
+// Mock Fullstory library dependency
+jest.mock('@libs/Fullstory', () => ({
+    default: {
+        consentAndIdentify: jest.fn(),
+    },
+    parseFSAttributes: jest.fn(),
+}));
+
 jest.mock('@pages/home/sidebar/NavigationTabBarAvatar');
 jest.mock('@src/components/Navigation/TopLevelNavigationTabBar');
 jest.mock('@components/ConfirmedRoute.tsx');
diff --git a/tests/navigation/SwitchPolicyIDTests.tsx b/tests/navigation/SwitchPolicyIDTests.tsx
index 418c974573f5..1c62132ec94b 100644
--- a/tests/navigation/SwitchPolicyIDTests.tsx
+++ b/tests/navigation/SwitchPolicyIDTests.tsx
@@ -12,6 +12,14 @@ import TestNavigationContainer from '../utils/TestNavigationContainer';
 jest.mock('@hooks/useResponsiveLayout', () => jest.fn());
 jest.mock('@libs/getIsNarrowLayout', () => jest.fn());
 
+// Mock Fullstory library dependency
+jest.mock('@libs/Fullstory', () => ({
+    default: {
+        consentAndIdentify: jest.fn(),
+    },
+    parseFSAttributes: jest.fn(),
+}));
+
 jest.mock('@pages/home/sidebar/NavigationTabBarAvatar');
 jest.mock('@src/components/Navigation/TopLevelNavigationTabBar');
 jest.mock('@components/ConfirmedRoute.tsx');

From ed4237b95a891d9bafd843a822a9b240bec03847 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 13:57:39 +0100
Subject: [PATCH 14/16] useIsAccountSettingsRouteActive for the condition

---
 src/libs/Navigation/helpers/useRouteActive.ts | 16 ++++++++++++++++
 src/pages/settings/InitialSettingsPage.tsx    |  5 ++++-
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/libs/Navigation/helpers/useRouteActive.ts

diff --git a/src/libs/Navigation/helpers/useRouteActive.ts b/src/libs/Navigation/helpers/useRouteActive.ts
new file mode 100644
index 000000000000..58d1cadb34bf
--- /dev/null
+++ b/src/libs/Navigation/helpers/useRouteActive.ts
@@ -0,0 +1,16 @@
+import {findFocusedRoute, useNavigationState} from '@react-navigation/native';
+import useRootNavigationState from '@hooks/useRootNavigationState';
+import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
+
+function useIsAccountSettingsRouteActive(isNarrowLayout: boolean) {
+    const focusedRoute = useNavigationState(findFocusedRoute);
+    const navigationState = useRootNavigationState((x) => x);
+
+    const isSettingsSplitNavigator = navigationState?.routes.at(-1)?.name === NAVIGATORS.SETTINGS_SPLIT_NAVIGATOR;
+    const isAccountSettings = focusedRoute?.name === SCREENS.SETTINGS.ROOT;
+
+    return isNarrowLayout ? isAccountSettings && isSettingsSplitNavigator : isSettingsSplitNavigator;
+}
+
+export default useIsAccountSettingsRouteActive;
diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index 6feeb09cae5c..3f3ae20c439b 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -36,6 +36,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {resetExitSurveyForm} from '@libs/actions/ExitSurvey';
 import {checkIfFeedConnectionIsBroken} from '@libs/CardUtils';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
+import useIsAccountSettingsRouteActive from '@libs/Navigation/helpers/useRouteActive';
 import Navigation from '@libs/Navigation/Navigation';
 import {getFreeTrialText, hasSubscriptionRedDotError} from '@libs/SubscriptionUtils';
 import {getProfilePageBrickRoadIndicator} from '@libs/UserUtils';
@@ -111,11 +112,13 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
     const {setRootStatusBarEnabled} = useContext(CustomStatusBarAndBackgroundContext);
     const {canUseLeftHandBar} = usePermissions();
 
+    const isScreenFocused = useIsAccountSettingsRouteActive(shouldUseNarrowLayout);
+
     const {
         renderProductTrainingTooltip: renderWorkspaceSettingsTooltip,
         shouldShowProductTrainingTooltip: shouldShowWorkspaceSettingsTooltip,
         hideProductTrainingTooltip: hideWorkspaceSettingsTooltip,
-    } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.WORKSPACES_SETTINGS, true);
+    } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.WORKSPACES_SETTINGS, isScreenFocused);
 
     // 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.

From 8b7056d406c327cb38c776e73a16ac31b26095c9 Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Thu, 1 May 2025 21:10:52 +0100
Subject: [PATCH 15/16] remove duplicate declaration

---
 src/pages/settings/InitialSettingsPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index 1389e4f2ee68..c189f30cd876 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -137,8 +137,6 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
     const freeTrialText = getFreeTrialText(policies);
     const shouldOpenBookACall = tryNewDot?.classicRedirect?.dismissed === false;
 
-    const isScreenFocused = useIsAccountSettingsRouteActive(shouldUseNarrowLayout);
-
     useEffect(() => {
         openInitialSettingsPage();
         confirmReadyToOpenApp();

From 900639bf8ad61eade630483f3103866b7fd318ab Mon Sep 17 00:00:00 2001
From: Rayane <77965000+rayane-d@users.noreply.github.com>
Date: Mon, 5 May 2025 00:40:36 +0100
Subject: [PATCH 16/16] feedback

---
 .../Navigation/NavigationTabBar/index.tsx     | 14 ++--------
 .../SearchPageHeader/SearchStatusBar.tsx      |  5 +++-
 .../home/sidebar/NavigationTabBarAvatar.tsx   | 28 ++++++++++++-------
 src/pages/settings/InitialSettingsPage.tsx    |  3 +-
 4 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/Navigation/NavigationTabBar/index.tsx b/src/components/Navigation/NavigationTabBar/index.tsx
index e98e9211cf8d..a10f504ddf07 100644
--- a/src/components/Navigation/NavigationTabBar/index.tsx
+++ b/src/components/Navigation/NavigationTabBar/index.tsx
@@ -68,11 +68,6 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
         shouldShowProductTrainingTooltip: shouldShowInboxTooltip,
         hideProductTrainingTooltip: hideInboxTooltip,
     } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.BOTTOM_NAV_INBOX_TOOLTIP, isTooltipAllowed && selectedTab !== NAVIGATION_TABS.HOME);
-    const {
-        renderProductTrainingTooltip: renderSettingsTooltip,
-        shouldShowProductTrainingTooltip: shouldShowSettingsTooltip,
-        hideProductTrainingTooltip: hideSettingsTooltip,
-    } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SETTINGS_TAB, isTooltipAllowed && selectedTab !== NAVIGATION_TABS.SETTINGS);
     const StyleUtils = useStyleUtils();
     const {canUseLeftHandBar} = usePermissions();
 
@@ -139,7 +134,6 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
      * If the user clicks on the settings tab while on this tab, this button should go back to the previous screen within the tab.
      */
     const showSettingsPage = useCallback(() => {
-        hideSettingsTooltip();
         const rootState = navigationRef.getRootState();
         const topmostFullScreenRoute = rootState.routes.findLast((route) => isFullScreenName(route.name));
         if (!topmostFullScreenRoute) {
@@ -208,7 +202,7 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
             // Otherwise we should simply open the settings navigator.
             Navigation.navigate(ROUTES.SETTINGS);
         });
-    }, [hideSettingsTooltip, shouldUseNarrowLayout]);
+    }, [shouldUseNarrowLayout]);
 
     if (!shouldUseNarrowLayout && canUseLeftHandBar) {
         return (
@@ -311,8 +305,7 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
                             isSelected={selectedTab === NAVIGATION_TABS.SETTINGS}
                             onPress={showSettingsPage}
                             isWebOrDesktop={isWebOrDesktop}
-                            shouldShowTooltip={shouldShowSettingsTooltip}
-                            renderTooltipContent={renderSettingsTooltip}
+                            isTooltipAllowed={isTooltipAllowed}
                         />
                     </View>
                     <View style={styles.leftNavigationTabBarItem}>
@@ -408,8 +401,7 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
                     isSelected={selectedTab === NAVIGATION_TABS.SETTINGS}
                     onPress={showSettingsPage}
                     isWebOrDesktop={isWebOrDesktop}
-                    shouldShowTooltip={shouldShowSettingsTooltip}
-                    renderTooltipContent={renderSettingsTooltip}
+                    isTooltipAllowed={isTooltipAllowed}
                 />
                 <View style={[styles.flex1, styles.navigationTabBarItem]}>
                     <NavigationTabBarFloatingActionButton isTooltipAllowed={isTooltipAllowed} />
diff --git a/src/components/Search/SearchPageHeader/SearchStatusBar.tsx b/src/components/Search/SearchPageHeader/SearchStatusBar.tsx
index b6f3ccec4261..60440901c7da 100644
--- a/src/components/Search/SearchPageHeader/SearchStatusBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchStatusBar.tsx
@@ -243,9 +243,12 @@ function SearchStatusBar({queryJSON, onStatusChange, headerButtonsOptions}: Sear
             };
         }, []),
     );
+    const isOutstandingStatusActive = Array.isArray(queryJSON.status)
+        ? queryJSON.status.includes(CONST.SEARCH.STATUS.EXPENSE.OUTSTANDING)
+        : queryJSON.status === CONST.SEARCH.STATUS.EXPENSE.OUTSTANDING;
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.OUTSANDING_FILTER,
-        isScreenFocused,
+        isScreenFocused && !isOutstandingStatusActive,
     );
     // 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.
diff --git a/src/pages/home/sidebar/NavigationTabBarAvatar.tsx b/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
index e5652c3fefaa..ab66c8736237 100644
--- a/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
+++ b/src/pages/home/sidebar/NavigationTabBarAvatar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import {PressableWithFeedback} from '@components/Pressable';
+import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import Text from '@components/Text';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -24,24 +25,31 @@ type NavigationTabBarAvatarProps = {
     /** Additional styles to add to the button */
     style?: StyleProp<ViewStyle>;
 
-    /** Should tooltip be visible */
-    shouldShowTooltip: boolean;
+    /** Whether the educational tooltip is allowed */
+    isTooltipAllowed: boolean;
 
     /** Whether the layout is for Web/Desktop */
     isWebOrDesktop: boolean;
-
-    /** Tooltip content to render */
-    renderTooltipContent: () => React.JSX.Element;
 };
 
-function NavigationTabBarAvatar({onPress, isSelected = false, style, shouldShowTooltip, isWebOrDesktop, renderTooltipContent}: NavigationTabBarAvatarProps) {
+function NavigationTabBarAvatar({onPress, isSelected = false, style, isTooltipAllowed, isWebOrDesktop}: NavigationTabBarAvatarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: false});
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
+        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SETTINGS_TAB,
+        isTooltipAllowed && !isSelected,
+    );
+
     const delegateEmail = account?.delegatedAccess?.delegate ?? '';
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const emojiStatus = currentUserPersonalDetails?.status?.emojiCode ?? '';
 
+    const hideTooltipAndSelectTab = () => {
+        hideProductTrainingTooltip();
+        onPress();
+    };
+
     let children;
 
     if (delegateEmail) {
@@ -71,19 +79,19 @@ function NavigationTabBarAvatar({onPress, isSelected = false, style, shouldShowT
 
     return (
         <EducationalTooltip
-            shouldRender={shouldShowTooltip}
+            shouldRender={shouldShowProductTrainingTooltip}
             anchorAlignment={{
                 horizontal: isWebOrDesktop ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                 vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
             }}
             shiftHorizontal={isWebOrDesktop ? 0 : variables.navigationTabBarSettingsTooltipShiftHorizontal}
-            renderTooltipContent={renderTooltipContent}
+            renderTooltipContent={renderProductTrainingTooltip}
             wrapperStyle={styles.productTrainingTooltipWrapper}
             shouldHideOnNavigate={false}
-            onTooltipPress={onPress}
+            onTooltipPress={hideTooltipAndSelectTab}
         >
             <PressableWithFeedback
-                onPress={onPress}
+                onPress={hideTooltipAndSelectTab}
                 role={CONST.ROLE.BUTTON}
                 accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
                 wrapperStyle={styles.flex1}
diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index c189f30cd876..49b24de9db9b 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -113,12 +113,13 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
     const {canUseLeftHandBar} = usePermissions();
 
     const isScreenFocused = useIsAccountSettingsRouteActive(shouldUseNarrowLayout);
+    const isWorkspacesTabSelected = focusedRouteName === SCREENS.SETTINGS.WORKSPACES;
 
     const {
         renderProductTrainingTooltip: renderWorkspaceSettingsTooltip,
         shouldShowProductTrainingTooltip: shouldShowWorkspaceSettingsTooltip,
         hideProductTrainingTooltip: hideWorkspaceSettingsTooltip,
-    } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.WORKSPACES_SETTINGS, isScreenFocused);
+    } = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.WORKSPACES_SETTINGS, isScreenFocused && !isWorkspacesTabSelected);
 
     // 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.