[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.