[$250] Tooptip loses position when screen is resized

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @MitchExpensify
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. On desktop or web, sign up with a new account and complete the onboarding modal steps
2. Resize your screen

Expected Result:

The tooltip keeps its correct position regardless of screen size

Actual Result:

The tooltip loses its position

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021881664477541067956
• Upwork Job ID: 1881664477541067956
• Last Price Increase: 2025-01-21
• Automatic offers:
• ZhenjaHorbach | Contributor | 105788594

Issue Owner

Current Issue Owner: @thienlnam

[melvin-bot]

Current assignee @zanyrenney is eligible for the Bug assigner, not assigning anyone new.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[ZhenjaHorbach]

Can reproduce.
Please assign me C+ as per https://expensify.slack.com/archives/C02NK2DQWUX/p1737122834680949

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The tooltip doesn't keep its position when screen is resized.

What is the root cause of that problem?

The tooltip position is only measured once when the tooltip is going to show.

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

Line 76 in efabde3

show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);

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

Lines 37 to 40 in efabde3

	const timerID = setTimeout(() => {
	show.current?.();
	}, 500);
	return () => {

When the screen is resized, in this case, the height, the position value stays the same, so it will be out of position.

What changes do you think we should make in order to solve the problem?

We have 3 options.

First, we can attach a dimension listener and remeasure it.

// a new ref, reposition
reposition.current = () => measureTooltipCoordinate(target, updateTargetBounds, () => {});

useEffect(() => {
    const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => {
        reposition.current?.();
    });
    return emojiPopoverDimensionListener.remove;
}, []);

This is how it looks:

a1.mp4

The 2nd option is to adjust the tooltip position based on the window size delta. Currently, the position is defined by xOffset and yOffset. This is the offset where the tooltip is measured.

App/src/components/Tooltip/GenericTooltip.tsx

Lines 171 to 172 in efabde3

	xOffset={xOffset}
	yOffset={yOffset}

We can subtract the offset to the difference of the current window size with the last window size when we measure the position.

yOffset={yOffset - (lastWindowSizeWhenMeasured.current.h - windowHeight)}

App/src/components/Tooltip/GenericTooltip.tsx

Lines 121 to 130 in efabde3

	const updateTargetBounds = (bounds: LayoutRectangle) => {
	if (bounds.width === 0) {
	setIsRendered(false);
	}
	setWrapperWidth(bounds.width);
	setWrapperHeight(bounds.height);
	setXOffset(bounds.x);
	setYOffset(bounds.y);
	};

lastWindowSizeWhenMeasured.current = {w: windowWidth, h: windowHeight};

This is how it looks:

a2.mp4

The last option is to use BoundsObserver just like how we use it in BaseTooltip.

App/src/components/Tooltip/BaseTooltip/index.tsx

Lines 102 to 108 in efabde3

	<BoundsObserver
	enabled={isVisible}
	onBoundsChange={(bounds) => {
	updateTargetBounds(getBounds(bounds));
	}}
	ref={ref}
	>

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

Lines 58 to 81 in efabde3

	return (
	<GenericTooltip
	shouldForceAnimate
	shouldRender={shouldRender}
	isEducationTooltip
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	>
	{({showTooltip, hideTooltip, updateTargetBounds}) => {
	// eslint-disable-next-line react-compiler/react-compiler
	hideTooltipRef.current = hideTooltip;
	return React.cloneElement(children as React.ReactElement, {
	onLayout: (e: LayoutChangeEventWithTarget) => {
	if (!shouldMeasure) {
	setShouldMeasure(true);
	}
	// e.target is specific to native, use e.nativeEvent.target on web instead
	const target = e.target || e.nativeEvent.target;
	show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
	},
	});
	}}
	</GenericTooltip>
	);

return (
    <BoundsObserver
        enabled={shouldRender}
        onBoundsChange={() => {
            if (targetRef.current) {
                measureTooltipCoordinate(targetRef.current, updateTargetBounds, () => {});
            }
        }}
    >
        {React.cloneElement(children as React.ReactElement, {
            onLayout: (e: LayoutChangeEventWithTarget) => {
                if (!shouldMeasure) {
                    setShouldMeasure(true);
                }
                // e.target is specific to native, use e.nativeEvent.target on web instead
                const target = e.target || e.nativeEvent.target;
                // new ref
                targetRef.current = target;
                show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
            },
        })}
    </BoundsObserver>    
);

This is how it looks:

a3.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[ishakakkad]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Tooptip loses position when screen is resized

What is the root cause of that problem?

When the screen size changes, the tooltip position is not reset, causing it to lose its correct position upon resizing

What changes do you think we should make in order to solve the problem?

To resolve this issue, we need to wrap the content of the GenericTooltip in a BoundsObserver. The following changes in BaseEducationalTooltip.tsx will address the problem.

<BoundsObserver
    enabled={shouldRender}
    onBoundsChange={(bounds) => {
        updateTargetBounds(bounds);
    }}
>
    {React.cloneElement(children as React.ReactElement, {
        onLayout: (e: LayoutChangeEventWithTarget) => {
            if (!shouldMeasure) {
                setShouldMeasure(true);
            }
            // e.target is specific to native, use e.nativeEvent.target on web instead
            const target = e.target || e.nativeEvent.target;
            show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
        },
    })}
</BoundsObserver> 

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

UI Bug so not needed

What alternative solutions did you explore? (Optional)

[melvin-bot]

@zanyrenney Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021881664477541067956

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ishpaul777 (External)

[zanyrenney]

Hey @ishpaul777 please could you review the proposals above? Thanks!

[ZhenjaHorbach]

Can I be assigned here ?

[ZhenjaHorbach]

Can reproduce.
Please assign me C+ as per https://expensify.slack.com/archives/C02NK2DQWUX/p1737122834680949

[zanyrenney]

Oh sure sorry!

[zanyrenney]

Updated @ZhenjaHorbach

[melvin-bot]

📣 @ZhenjaHorbach 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[ZhenjaHorbach]

Updated @ZhenjaHorbach

Thanks a lot !
I will review proposals today

[zanyrenney]

Thank you!

[ZhenjaHorbach]

@zanyrenney

Still reproducible
Looks like this is a separate issue
Let's remove HOLD and wait for proposals !

[ZhenjaHorbach]

@bernhardoj @ishakakkad
Could you update your proposals if needed ?

[bernhardoj]

No update needed

[ZhenjaHorbach]

No update needed

Nice
Thanks !
I'll check it on Wednesday !

[ZhenjaHorbach]

@bernhardoj
Thanks for your proposals !

But unfortunately, all solutions have bugs
The first two are that when changing the height, the tooltip can be displayed at the bottom

2025-03-19.12.24.04.mov

And about the third solution
I don't think we should use BoundsObserver because it might interfere with a previous fix we were waiting to implement Additionally, BoundsObserver was already rejected in the context of that issue

[melvin-bot]

@zanyrenney, @ZhenjaHorbach Eep! 4 days overdue now. Issues have feelings too...

[ZhenjaHorbach]

Not overdue
Waiting for proposals !

[bernhardoj]

I don't think we should use BoundsObserver because it might interfere with a previous fix we were waiting to implement Additionally, BoundsObserver was already rejected in the context of that issue

They don't use BoundsObserver because it's web only. BaseTooltip also uses the same solution.

App/src/components/Tooltip/BaseTooltip/index.tsx

Lines 102 to 118 in ca1f4ff

	<BoundsObserver
	enabled={isVisible}
	onBoundsChange={(bounds) => {
	updateTargetBounds(getBounds(bounds));
	}}
	ref={ref}
	>
	<Hoverable
	onHoverIn={showTooltip}
	onHoverOut={hideTooltip}
	shouldHandleScroll={shouldHandleScroll}
	>
	{React.cloneElement(children as React.ReactElement, {
	onMouseEnter: updateTargetPositionOnMouseEnter,
	})}
	</Hoverable>
	</BoundsObserver>

[ZhenjaHorbach]

I don't think we should use BoundsObserver because it might interfere with a previous fix we were waiting to implement Additionally, BoundsObserver was already rejected in the context of that issue

They don't use BoundsObserver because it's web only. BaseTooltip also uses the same solution.

App/src/components/Tooltip/BaseTooltip/index.tsx

Lines 102 to 118 in ca1f4ff

<BoundsObserver
enabled={isVisible}
onBoundsChange={(bounds) => {
updateTargetBounds(getBounds(bounds));
}}
ref={ref}

 <Hoverable 
     onHoverIn={showTooltip} 
     onHoverOut={hideTooltip} 
     shouldHandleScroll={shouldHandleScroll} 
 > 
     {React.cloneElement(children as React.ReactElement, { 
         onMouseEnter: updateTargetPositionOnMouseEnter, 
     })} 
 </Hoverable> 

Oh
Yeah
You are right !
In this case I don't mind to go with the third option from this proposal !

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @thienlnam, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mohit6789]

@ZhenjaHorbach @bernhardoj BaseTooltip is only used on web. We does not show the tooltip in mobile because of that BoundsObserver works in case of BaseTooltip. I already tried BoundsObserver in my previous ticket, it will not work in case of mobile apps. BaseEducationalTooltip.tsx will be used in all our apps (web, mobile app, and desktop)

[ZhenjaHorbach]

@ZhenjaHorbach @bernhardoj BaseTooltip is only used on web. We does not show the tooltip in mobile because of that BoundsObserver works in case of BaseTooltip. I already tried BoundsObserver in my previous ticket, it will not work in case of mobile apps.

It's okay
This is a web specific issue 😅

[bernhardoj]

The first two are that when changing the height, the tooltip can be displayed at the bottom

@ZhenjaHorbach I just re-tested and using BoundsObserver still shows the tooltip at the bottom briefly. I believe the 2nd approach doesn't have this bug. Can you please retest it? (all the videos showing each approach is on my proposal already)

web.mp4

[ZhenjaHorbach]

The first two are that when changing the height, the tooltip can be displayed at the bottom

@ZhenjaHorbach I just re-tested and using BoundsObserver still shows the tooltip at the bottom briefly. I believe the 2nd approach doesn't have this bug. Can you please retest it? (all the videos showing each approach is on my proposal already)

web.mp4

Hmmm
Interesting
When I tested it, I didn't have this issue unlike other options

[ZhenjaHorbach]

And about second option
It works good with Create expenses tooltip, but we have problems with Your-to-do-list tooltip

2025-03-29.08.15.47.mov

[bernhardoj]

but we have problems with Your-to-do-list tooltip

Hmm, the positioning looks weird. I'll check it later.

[melvin-bot]

@thienlnam Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ZhenjaHorbach]

Not overdue

[zanyrenney]

how are we doing here @ZhenjaHorbach @bernhardoj ?

[ZhenjaHorbach]

how are we doing here @ZhenjaHorbach @bernhardoj ?

We are working on a fix !

[melvin-bot]

@thienlnam Eep! 4 days overdue now. Issues have feelings too...