reset tooltip position on scroll #56209

mohit6789 · 2025-02-01T12:48:37Z

Explanation of Change

Fixed Issues

$#54924
PROPOSAL:#54924 (comment)

Tests

Verify that no errors appear in the JS console
Same as QA

Offline tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."

Verify that no errors appear in the JS console

Scenario 1

Register and login using new user.
Create multiple workspace so scrolling is visible into LHN.
Verify tooltip into LHN sidebar is visible.
Start scrolling, tooltip should be hidden during scrolling and after scroll tooltip position should be reset.

Scenario 2

Register and login using new user.
Verify all the education tooltip is visible as expected.
Expected: All education tooltips remain visible during scrolling, except the tooltip on the LHN (Left-Hand Navigation) and Search Input on mobile, which should hide during scrolling.

PR Author Checklist

Screenshots/Videos

Android: Native

Android.mp4

Android: mWeb Chrome

Android.Web.mp4

iOS: Native

IOS.mp4

iOS: mWeb Safari

IOS.Web.mp4

MacOS: Chrome / Safari

Web.mp4

MacOS: Desktop

Desktop.mp4

melvin-bot · 2025-02-26T17:34:19Z

@hoangzinh Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

hoangzinh · 2025-02-27T09:34:36Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Screen.Recording.2025-03-06.at.16.41.47.android.mov

Android: mWeb Chrome

Screen.Recording.2025-03-06.at.16.38.41.android.chrome.mov

iOS: Native

Screen.Recording.2025-03-06.at.16.51.11.mov

iOS: mWeb Safari

Screen.Recording.2025-03-06.at.16.44.38.ios.safari.mov

MacOS: Chrome / Safari

Screen.Recording.2025-03-05.at.21.59.59.web.mov

MacOS: Desktop

Screen.Recording.2025-03-05.at.22.04.46.desktop.mov

hoangzinh · 2025-02-27T09:52:25Z

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -198,6 +198,8 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                shiftVertical={shouldShowWokspaceChatTooltip ? 0 : variables.composerTooltipShiftVertical}
                wrapperStyle={styles.productTrainingTooltipWrapper}
                onTooltipPress={onOptionPress}
+                name={CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP}
+                shouldHideOnEdge


Are there any cases that we shouldn't hide on edge?

We hide the tooltip when content is below the header and footer. We have many tooltip which we show on header and footer. So I passed shouldHideOnEdge for the tooltip which should be hide during scrolling and all the other tooltips will be shown as it is.

hoangzinh · 2025-02-27T10:24:19Z

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

+        if (!shouldRender || !name || !shouldHideOnEdge) {
+            return;
+        }
+        setTooltipPosition(false, name);


In my opinion, it should be clearer if we only put those into setTooltipPosition method, and define another method (i.e handleTooltipVisibibe) that will same as current setTooltipPosition method. Then we can use both of them here. Wdyt?

Currently, this logic based on few flags and name of the tooltip here. If we separate into multiple function we need to add check in both the methods. If I separate handleTooltipVisible() will only have this three lines of code. So I don't think we get more benefits on this. Anyway it is upto you if you want I can refactor, let me know WDYT.

I thought we always set tooltip position on mount for all educational tooltip. If we separate like this, we don't need to pass default value like (false, name) in order to bypass those conditions

If I separate handleTooltipVisible() will only have this three lines of code.

Isn't it 9 lines of code here? 👀

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 34 to 42 in ae23518

if (tooltipName !== name || !genericTooltipStateRef.current || !tooltipElRef.current) {

return;

}

const {hideTooltip, showTooltip, updateTargetBounds} = genericTooltipStateRef.current;

if (isScrolling) {

hideTooltip();

} else {

getTooltipCoordiate(tooltipElRef.current, (bounds) => {

@hoangzinh not exactly, if we split this function into two function then first three lines(below code) of code needs to be add in both the function so if below condition will be true no code will be executed.

if (tooltipName !== name || !genericTooltipStateRef.current || !tooltipElRef.current) { return; }

Also I required const {hideTooltip, showTooltip, updateTargetBounds} = genericTooltipStateRef.current; line in else block as well so only three lines of code can be moved into another function.

hoangzinh · 2025-02-27T10:36:07Z

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -244,8 +247,9 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
            if (isWebOrDesktop) {
                saveScrollIndex(route, Math.floor(e.nativeEvent.contentOffset.y / estimatedItemSize));
            }
+            triggerScrollEvent();


In theory, we only display 1 educational tooltip at a time. Is it easier if we can reuse the existing scrolling event here

App/src/components/InvertedFlatList/index.tsx

Lines 33 to 48 in 0856182

const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {

onScrollProp(event);

if (!updateInProgress.current) {

updateInProgress.current = true;

DeviceEventEmitter.emit(CONST.EVENTS.SCROLLING, true);

}

};

/**

* Emits when the scrolling has ended.

*/

const onScrollEnd = () => {

DeviceEventEmitter.emit(CONST.EVENTS.SCROLLING, false);

updateInProgress.current = false;

};

And we also introduce additional prop to EducationalTooltip (i.e shouldHideOnScroll). Then we check if it's displayed and shouldHideOnScroll, we will hide/display tooltip. Wdyt?

We need show/hide tooltip in scrolling for SearchPage as well so I have created new hook. And in future we need to add more we can reuse same hook. So as per me current implementation can be reused in other places as well. Let me know if you have any other opinion.

The problem with this approach:

We're gonna add more places, like InviteMemberListItem, it also use SelectionList.

If later, we remove EducationTooltip in those places, let's say this component LHNOptionsList, we probably forgot to remove this scroll event emitter as well.

The new hook is a good idea, I like it. It helps reuse. But if we can also have a way to avoid above concerns, that should be great. Any thoughts? Something like put this new hook into SelectionList

@hoangzinh I did not understand what you are trying to say. Can you please provide code snippet about your thoughts?

What I understand is, we need to call triggerScrollEvent() whenever scrolling happened, and also this is not limited to SelectionList right? We can have different types of wrapper which can scroll, so I am not sure if we can make changes in one places and it will be applied to all the places.

In LHNOptionsList we used FlashList component while in Search we use SelectionListWithModal which internally use SelectionList so I think it is better idea to use the new hook and trigger the event whenever necessary.

Hmm I see the problem. Basically, what I meant is putting useScrollEventEmitter in SelectionList, so other components using SelectionList, we don't need to initialize useScrollEventEmitter anymore. Anyways, I'm good with current, but 2 things:

Can you add a comment above this line, to explain why do we need this line? It will help to remove/improve later.

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Line 70 in ae23518

const triggerScrollEvent = useScrollEventEmitter({tooltipName: CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP});

I'm still thinking that we don't need to inject tooltipName into useScrollEventEmitter and simply call useScrollEventEmitter(). Reason: In some components, we have 2-3 kinds of EducationalTooltip. For example, in OptionRowLHN, it has 2 kinds of tooltip

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 73 in fc643d5

const tooltip = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;

If we go with current approach, do we need to setup 2 useScrollEventEmitter?

const triggerScrollEvent1 = useScrollEventEmitter({tooltipName: CONST.PRODUCT_TRAINING_TOOLTIP_NAMES. }); const triggerScrollEvent2 = useScrollEventEmitter({tooltipName: CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR}); ... triggerScrollEvent1(); triggerScrollEvent2();

My thoughts here is we can introduce an additional prop shouldHideOnScroll in BaseEducationalTooltip, then only setup 1 useScrollEventEmitter() in OptionRowLHN and pass shouldHideOnScroll={true} here

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 189 to 201 in fc643d5

<EducationalTooltip

// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

shouldRender={shouldShowProductTrainingTooltip}

renderTooltipContent={renderProductTrainingTooltip}

anchorAlignment={{

horizontal: shouldShowWokspaceChatTooltip ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,

vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,

}}

shiftHorizontal={shouldShowWokspaceChatTooltip ? variables.workspaceLHNtooltipShiftHorizontal : variables.gbrTooltipShiftHorizontal}

shiftVertical={shouldShowWokspaceChatTooltip ? 0 : variables.composerTooltipShiftVertical}

wrapperStyle={styles.productTrainingTooltipWrapper}

onTooltipPress={onOptionPress}

>

wdyt? @mohit6789

Let me try to implement it, and see if this will work or not

Changes pushed

hoangzinh · 2025-02-27T10:42:49Z

@mohit6789 is it feasible to only hide if the component is nearly or completely hidden? At the moment, it's hidden eventhough component is half-hidden.

Screen.Recording.2025-02-27.at.17.40.56.mov

mohit6789 · 2025-02-27T15:39:31Z

@mohit6789 is it feasible to only hide if the component is nearly or completely hidden? At the moment, it's hidden eventhough component is half-hidden.

Screen.Recording.2025-02-27.at.17.40.56.mov

Sure I will add few more pixels so it will be hide when it reach near the header or footer.

mohit6789 · 2025-03-03T07:23:21Z

@hoangzinh do you have any comment on my reply? If not I will fix your last suggestion about hiding the tooltip near the edges?

hoangzinh · 2025-03-03T10:59:10Z

Sorry @mohit6789 I just realized that all my feedbacks were pending to submit

hoangzinh · 2025-03-03T11:00:19Z

If not I will fix your last suggestion about hiding the tooltip near the edges?

@mohit6789 yes if it's feasible

…ip-issue

mohit6789 · 2025-03-05T06:39:01Z

If not I will fix your last suggestion about hiding the tooltip near the edges?

@mohit6789 yes if it's feasible

Changes pushed

mohit6789 · 2025-03-05T07:56:44Z

@hoangzinh I have made review comment changes, please review it again.

hoangzinh

Look good. Just small comment

hoangzinh · 2025-03-05T10:13:59Z

src/components/Tooltip/types.ts

@@ -87,6 +87,9 @@ type EducationalTooltipProps = ChildrenProps &

        /** Whether the tooltip should hide when navigating */
        shouldHideOnNavigate?: boolean;
+
+        /** whether tooltip should hide during scrolling  */
+        shouldHideOnEdge?: boolean;


shouldHideOnScroll is clearer for me. What do you think?

Sorry @mohit6789 to make confusing here, can you take a look at this my last feedback here? :thank you:

hoangzinh · 2025-03-05T10:15:48Z

Oops, it's a wrong click @MonilBhavsar. I still review this PR. I will revert approval

hoangzinh

Revert previous approval

mohit6789 · 2025-03-05T14:14:52Z

@hoangzinh changes pushed

hoangzinh · 2025-03-05T14:34:33Z

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

+            return;
+        }
+        setTooltipPosition(false);
+        const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, ({isScrolling}: ScrollingEventData = {isScrolling: false, tooltipName: ''}) => {


Suggested change

const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, ({isScrolling}: ScrollingEventData = {isScrolling: false, tooltipName: ''}) => {

const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, ({isScrolling}: ScrollingEventData = {isScrolling: false}) => {

It seems we can remove tooltipName prop

@hoangzinh fixed

hoangzinh · 2025-03-05T15:19:14Z

On mweb Android, eventhought the custom search icon is hidden but the tooltip still shows

mohit6789 · 2025-03-05T16:29:37Z

@hoangzinh tooltip will be hidden when search box is near the top of header. So if you go a bit up then it will be hide. Previously I have added 10px as a buffer but after your request I have added 30px. Let me know if you want I can change to 20px as buffer.

mohit6789 · 2025-03-05T16:48:55Z

@hoangzinh it will be grateful if you tried your preferred value here

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 45 in 0aa4535

const offset = 30; // Buffer space

and let me know what is best suits for you and I will make changes as per your need. That will avoid lots of back and forth with comments.

hoangzinh · 2025-03-05T23:27:59Z

@mohit6789 Sorry, after playing around, it seems 10 is good to me.

hoangzinh · 2025-03-06T02:13:08Z

On Android, if the WS chat is above the last chat, it hides the tooltip. Does it happen in your end? @mohit6789 I did log the availableHeightForTop, availableHeightForBottom for visibility.

Screen.Recording.2025-03-06.at.09.10.04.mov

mohit6789 · 2025-03-06T06:11:55Z

@hoangzinh Changes pushed for android issue and make buffer size to 10

hoangzinh

LGTM

hoangzinh · 2025-03-06T09:55:15Z

all yours @MonilBhavsar

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

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

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

src/components/Tooltip/types.ts

src/components/LHNOptionsList/LHNOptionsList.tsx

src/pages/Search/SearchPageNarrow.tsx

MonilBhavsar

Can we please try to expand tests and QA for all pages that uses tooltips?

mohit6789 · 2025-03-07T03:32:51Z

Can we please try to expand tests and QA for all pages that uses tooltips?

@MonilBhavsar We don't have existing test cases for tooltip. So it would be great to create separate task to add test cases for tooltip. You can check my web and desktop recording where most of the education tooltip were tested.

mohit6789 · 2025-03-07T03:51:58Z

@MonilBhavsar review changes pushed

MonilBhavsar · 2025-03-07T05:17:48Z

We don't have existing test cases for tooltip. So it would be great to create separate task to add test cases for tooltip. You can check my web and desktop recording where most of the education tooltip were tested.

I mean the manual tests. Could you please add the tests for Reports page in the "Tests" and "QA" section in the description

mohit6789 · 2025-03-07T06:01:27Z

We don't have existing test cases for tooltip. So it would be great to create separate task to add test cases for tooltip. You can check my web and desktop recording where most of the education tooltip were tested.

I mean the manual tests. Could you please add the tests for Reports page in the "Tests" and "QA" section in the description

@MonilBhavsar Updated test section in description

Co-authored-by: Monil Bhavsar <monilbhavsar25@gmail.com>

mohit6789 · 2025-03-07T08:25:37Z

@MonilBhavsar updated the comment in BaseEducationalTooltip

MonilBhavsar

Thanks!

OSBotify · 2025-03-07T19:51:59Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

mohit6789 mentioned this pull request Feb 1, 2025

[$250] Submit expenses and chat with approver tooltip appears at the top of the page sometimes #54924

Open

8 tasks

mohit6789 added 2 commits February 26, 2025 18:45

reset tooltip position on scroll

a6b5f75

Refactor

e04e6da

mohit6789 force-pushed the 54924-scrolling-tooltip-issue branch from 3169431 to e04e6da Compare February 26, 2025 13:18

mohit6789 added 6 commits February 26, 2025 18:55

Fix conflict issues

b5957f6

Fix conflict issues

8aa3e13

Fix merge conflict

66a337f

Fix eslint issues

9591074

Fix eslint issues

d694671

Fix eslint issues

ae23518

mohit6789 marked this pull request as ready for review February 26, 2025 17:34

mohit6789 requested a review from a team as a code owner February 26, 2025 17:34

melvin-bot bot requested review from hoangzinh and removed request for a team February 26, 2025 17:34

hoangzinh reviewed Feb 27, 2025

View reviewed changes

mohit6789 added 2 commits March 5, 2025 11:29

Merge remote-tracking branch 'origin/main' into 54924-scrolling-toolt…

8dd063b

…ip-issue

Review comment fix

61008a6

mohit6789 added 2 commits March 5, 2025 12:21

Fix eslint

97ba896

Fix eslint

039ff0e

hoangzinh approved these changes Mar 5, 2025

View reviewed changes

melvin-bot bot requested a review from MonilBhavsar March 5, 2025 10:14

hoangzinh suggested changes Mar 5, 2025

View reviewed changes

Review comment fix

008d4f3

hoangzinh reviewed Mar 5, 2025

View reviewed changes

Review comment fix

0aa4535

Fix review comment

14cfc5a

hoangzinh approved these changes Mar 6, 2025

View reviewed changes

MonilBhavsar reviewed Mar 7, 2025

View reviewed changes

Fix review comment

51ce273

Fix review comment

d384480

Co-authored-by: Monil Bhavsar <monilbhavsar25@gmail.com>

mohit6789 requested a review from MonilBhavsar March 7, 2025 08:24

MonilBhavsar approved these changes Mar 7, 2025

View reviewed changes

MonilBhavsar merged commit 1e5f4b0 into Expensify:main Mar 7, 2025
16 checks passed

	if (tooltipName !== name \|\| !genericTooltipStateRef.current \|\| !tooltipElRef.current) {
	return;
	}

	const {hideTooltip, showTooltip, updateTargetBounds} = genericTooltipStateRef.current;
	if (isScrolling) {
	hideTooltip();
	} else {
	getTooltipCoordiate(tooltipElRef.current, (bounds) => {

	const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
	onScrollProp(event);

	if (!updateInProgress.current) {
	updateInProgress.current = true;
	DeviceEventEmitter.emit(CONST.EVENTS.SCROLLING, true);
	}
	};

	/**
	* Emits when the scrolling has ended.
	*/
	const onScrollEnd = () => {
	DeviceEventEmitter.emit(CONST.EVENTS.SCROLLING, false);
	updateInProgress.current = false;
	};

	<EducationalTooltip
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	shouldRender={shouldShowProductTrainingTooltip}
	renderTooltipContent={renderProductTrainingTooltip}
	anchorAlignment={{
	horizontal: shouldShowWokspaceChatTooltip ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
	}}
	shiftHorizontal={shouldShowWokspaceChatTooltip ? variables.workspaceLHNtooltipShiftHorizontal : variables.gbrTooltipShiftHorizontal}
	shiftVertical={shouldShowWokspaceChatTooltip ? 0 : variables.composerTooltipShiftVertical}
	wrapperStyle={styles.productTrainingTooltipWrapper}
	onTooltipPress={onOptionPress}
	>

	const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, ({isScrolling}: ScrollingEventData = {isScrolling: false, tooltipName: ''}) => {
	const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, ({isScrolling}: ScrollingEventData = {isScrolling: false}) => {

reset tooltip position on scroll #56209

reset tooltip position on scroll #56209

Conversation

mohit6789 commented Feb 1, 2025 • edited by MonilBhavsar Loading

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Feb 26, 2025

hoangzinh commented Feb 27, 2025 • edited Loading

Reviewer Checklist

Screenshots/Videos

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mohit6789 Mar 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mohit6789 Feb 27, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mohit6789 Mar 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoangzinh commented Feb 27, 2025

mohit6789 commented Feb 27, 2025

mohit6789 commented Mar 3, 2025

hoangzinh commented Mar 3, 2025 • edited Loading

hoangzinh commented Mar 3, 2025

mohit6789 commented Mar 5, 2025

mohit6789 commented Mar 5, 2025

hoangzinh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoangzinh commented Mar 5, 2025

hoangzinh left a comment

Choose a reason for hiding this comment

mohit6789 commented Mar 5, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoangzinh commented Mar 5, 2025

mohit6789 commented Mar 5, 2025 • edited Loading

mohit6789 commented Mar 5, 2025 • edited Loading

hoangzinh commented Mar 5, 2025

hoangzinh commented Mar 6, 2025

mohit6789 commented Mar 6, 2025

hoangzinh left a comment

Choose a reason for hiding this comment

hoangzinh commented Mar 6, 2025

MonilBhavsar left a comment

Choose a reason for hiding this comment

mohit6789 commented Mar 7, 2025 • edited Loading

mohit6789 commented Mar 7, 2025

MonilBhavsar commented Mar 7, 2025

mohit6789 commented Mar 7, 2025

mohit6789 commented Mar 7, 2025

MonilBhavsar left a comment

Choose a reason for hiding this comment

OSBotify commented Mar 7, 2025

mohit6789 commented Feb 1, 2025 •

edited by MonilBhavsar

Loading

hoangzinh commented Feb 27, 2025 •

edited

Loading

mohit6789 Mar 3, 2025 •

edited

Loading

mohit6789 Feb 27, 2025 •

edited

Loading

mohit6789 Mar 3, 2025 •

edited

Loading

hoangzinh commented Mar 3, 2025 •

edited

Loading

mohit6789 commented Mar 5, 2025 •

edited

Loading

mohit6789 commented Mar 5, 2025 •

edited

Loading

mohit6789 commented Mar 7, 2025 •

edited

Loading