[HOLD for payment 2025-01-28] [$250] Improve visibility of tooltips

[quinthar]

Problem: Our current educational tooltips use a very small pointer arrow, and they have very low contrast with the background color of the app in light mode. As a result, it's quite hard to tell exactly what a tooltip is pointing at.

Solution: Let's update our tooltips to use a higher-contrast BG color, use a larger pointer, and make them theme-dependent. The result would be something like this:

Light mode:

• BG: green700
• icon: green400
• text: textReversed (aka text color we use for dark mode)

Dark mode:

• BG: green200
• icon: green 400
• text: textReversed (aka text color we use for light mode)

Pointer:

• New size should be 16px wide by 8px tall

Convo: https://expensify.slack.com/archives/C07HPDRELLD/p1735250426325589

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876672988734265232
• Upwork Job ID: 1876672988734265232
• Last Price Increase: 2025-01-07
• Automatic offers:
• ishpaul777 | Reviewer | 105640697
• truph01 | Contributor | 105640699

Issue Owner

Current Issue Owner: @garrettmknight

[shawnborton]

cc @Expensify/design - want to make sure you all get a chance to weigh in here before we make this one External.

Right now in the mock above, I am doing this:

Light mode:

• BG: green700
• icon: green400
• text: textReversed (aka text color we use for dark mode)

Dark mode:

• BG: green200
• icon: green 400
• text: textReversed (aka text color we use for light mode)

Figma is here.

[melvin-bot]

Current assignee @shawnborton is eligible for the Design assigner, not assigning anyone new.

[truph01]

Edited by proposal-police: This proposal was edited at 2025-01-03 09:42:19 UTC.

Proposal

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

• Improve visibility of tooltips

What is the root cause of that problem?

• It is a new feature

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

• Update:
  

  App/src/styles/theme/themes/dark.ts

  Line 83 in 04cd7b0

  tooltipHighlightBG: colors.green100,

to:

    tooltipHighlightBG: colors.green200,

• Update:

App/src/styles/theme/themes/light.ts

Line 83 in 04cd7b0

tooltipHighlightBG: colors.green100,

    tooltipHighlightBG: colors.green700,

• Update:

App/src/styles/index.ts

Line 4016 in 04cd7b0

color: theme.textDark,

            color: theme.textReversed,

• For the pointer size, we can update this so that it looks bigger based on the design, for example:

                borderLeftWidth: 8,
                borderRightWidth: 8,
                borderTopWidth: 8,

We need to update the POINTER_WIDTH to 16 and POINTER_HEIGHT to 8 directly since we are using it in other places. We can create a flag so that we only apply this change to the education tooltip:

1. Update this:

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

Line 59 in 9293c26

<GenericTooltip

to:

        <GenericTooltip
            isEducationTooltip

2. The above isEducationTooltip will be passed down and used in:

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

Line 71 in 9293c26

StyleUtils.getTooltipStyles({

            StyleUtils.getTooltipStyles({
                ...,
                isEducationTooltip,
            }),

3. The above isEducationTooltip will be passed down and used in:

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Line 82 in 9293c26

getTooltipStyles: ({

    getTooltipStyles: ({
        ...,
        isEducationTooltip = false,
    }) => {

4. Finally, we use isEducationTooltip as a flag. For example, isEducationTooltip ? EDUCATION_POINTER_WIDTH : POINTER_WIDTH. Here, we introduce a new const EDUCATION_POINTER_WIDTH: 16.

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

What alternative solutions did you explore? (Optional)

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2025-01-03 09:51:08 UTC.

Proposal

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

Improve visibility of tooltips

What is the root cause of that problem?

Improvement

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

We need to update the tooltip color here

BG (dark mode) color

App/src/styles/theme/themes/dark.ts

Line 83 in 04cd7b0

tooltipHighlightBG: colors.green100,

to: colors.green200,

BG (light mode) color

App/src/styles/theme/themes/light.ts

Line 83 in 04cd7b0

tooltipHighlightBG: colors.green100,

tooltipHighlightBG: colors.green700,

And also we need to update the text color as well

App/src/styles/index.ts

Line 4016 in 04cd7b0

color: theme.textDark,

color: theme.textReversed,

And we also need to increase the width and the height of the pointer pointer

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Lines 18 to 22 in 04cd7b0

	/** The height of a tooltip pointer */
	const POINTER_HEIGHT = 4;
	/** The width of a tooltip pointer */
	const POINTER_WIDTH = 12;

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Lines 255 to 257 in 04cd7b0

	borderLeftWidth: POINTER_WIDTH / 2,
	borderRightWidth: POINTER_WIDTH / 2,
	borderTopWidth: POINTER_HEIGHT,

We can change the POINTER_WIDTH to 16 and POINTER_HEIGHT to 8 instead of changing directly here

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Lines 255 to 257 in 04cd7b0

	borderLeftWidth: POINTER_WIDTH / 2,
	borderRightWidth: POINTER_WIDTH / 2,
	borderTopWidth: POINTER_HEIGHT,

Because we use that variables in some places when displaying the tooltip like here:

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Lines 144 to 145 in 04cd7b0

	? Math.max(-horizontalShift, -(tooltipWidth / 2) + POINTER_WIDTH / 2 + variables.componentBorderRadiusSmall)
	: Math.min(-horizontalShift, tooltipWidth / 2 - POINTER_WIDTH / 2 - variables.componentBorderRadiusSmall);

and here

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Lines 198 to 199 in 04cd7b0

	case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT:
	pointerWrapperLeft = POINTER_WIDTH / 2;

And also we don't need to update the icon color because it's already using color.green400

App/src/styles/theme/themes/dark.ts

Line 84 in 04cd7b0

tooltipHighlightText: colors.green400,

App/src/styles/theme/themes/light.ts

Line 84 in 04cd7b0

tooltipHighlightText: colors.green400,

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

What alternative solutions did you explore? (Optional)

[github-actions]

jeff Your proposal will be dismissed because you did not follow the proposal template.

[truph01]

Proposal updated

[NJ-2020]

Proposal Updated

[melvin-bot]

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

[dannymcclain]

Posted in the thread!

[shawnborton]

Alright, sounds like we are cool with the higher contrast version. I updated the original post, let's get this assigned and ready for proposal review.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @garrettmknight (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

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

[Sahil-Ghangash]

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

• Tooltips are hard to see due to low contrast and a small pointer, especially in light mode.

What is the root cause of that problem?

• Low contrast and small pointer design make tooltips unclear and ineffective.

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

• Increase tooltip contrast for both themes.
• Use a larger pointer arrow.
• Make tooltips theme-specific for better clarity.

Update in App/src/styles/theme/themes/dark.ts:

tooltipHighlightBG: colors.green100,
to:
tooltipHighlightBG: colors.green200,

Update in App/src/styles/theme/themes/light.ts:

tooltipHighlightBG: colors.green100,
to:
tooltipHighlightBG: colors.green700,

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

• Verify the contrast between light and dark modes.
• Check pointer size and positioning.
• Ensure tooltips adapt to themes.

What alternative solutions did you explore? (Optional)

• Add animations for better visibility.
• Allow users to customize tooltip styles.

[melvin-bot]

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

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @truph01 🎉 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 📖

[truph01]

@ishpaul777 PR is ready

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.87-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Improve visibility of tooltips #55148

If no regressions arise, payment will be issued on 2025-01-28. 🎊

For reference, here are some details about the assignees on this issue:

• @ishpaul777 requires payment automatic offer (Reviewer)
• @truph01 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ishpaul777] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[linhvovan29546]

@garrettmknight I found a regression on Android caused by this, where the tooltip tip's width continues to increase indefinitely, which I previously reported here.

android-tooltip-width.mp4

[ishpaul777]

@linhvovan29546 our PR does not cause such an issue it's not reproducible on my dev. app and deployed production app

Screen.Recording.2025-01-27.at.12.55.24.PM.mov

[linhvovan29546]

@ishpaul777 I can reproduce the issue in dev app(debug mode), but I was unable to reproduce it in the production app

[ishpaul777]

@linhvovan29546 try reverting our PR and retest on main, we did not changes any of the logic related to positoning or size of tooltip so its not clear to me how this can be caused by our if this was a bug QA would have caught it in staging. @truph01 if you can test this it would be great

[garrettmknight]

I couldn't reproduce either on staging so I think we're good here?

[garrettmknight]

@ishpaul777 in the meantime, can you complete the checklist?

[ishpaul777]

[@ishpaul777] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.

Regression Test Proposal :

steps:

1. verify all educational tooltips match the following design

Do we agree 👍 or 👎

[garrettmknight]

Cool, I think we're good to go here.