[HOLD for payment 2024-08-07] [$250] Web - Profile - Hovering over the zoom tool does not display a tooltip

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.85-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/a
Issue reported by: Applause - Internal Team

Action Performed:

Prerequisite: The user is logged in to the website.

1. Navigate to account Settings > Profile
2. Click on the avatar
3. Click on upload photo and upload any JPEG image
4. Hover over the zoom tool

Expected Result:

A tooltip is displayed indicating the zoom tool

Actual Result:

A tooltip is not displayed when the user hovers over the zoom tool

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6517909_1718758371346.No_tooltip.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016a8bfe25d7d10e4d
• Upwork Job ID: 1805408259060604733
• Last Price Increase: 2024-06-25
• Automatic offers:
• ishpaul777 | Reviewer | 102948392
• Krishna2323 | Contributor | 102948394

Issue Owner

Current Issue Owner: @ishpaul777

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

Proposal

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

Web - Profile - Hovering over the zoom tool does not display a tooltip

What is the root cause of that problem?

The tooltip doesn't work because of styles.pointerEventsNone.

App/src/components/AvatarCropModal/Slider.tsx

Lines 60 to 66 in e033314

	<Tooltip
	text={translate('common.zoom')}
	shiftVertical={-2}
	>
	{/* pointerEventsNone is a workaround to make sure the pan gesture works correctly on mobile safari */}
	<View style={[styles.sliderKnobTooltipView, styles.pointerEventsNone]} />
	</Tooltip>

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

Since the styles.pointerEventsNone style is applied for mobile safari and hover doesn't work on touch enabled devices, we can add a check to only add that style for mobile safari.

<View style={[styles.sliderKnobTooltipView, Browser.isMobileSafari() && styles.pointerEventsNone]} />

What alternative solutions did you explore? (Optional)

[truph01]

Proposal

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

A tooltip is not displayed when the user hovers over the zoom tool

What is the root cause of that problem?

• In this PR, we add a logic to display the Slider tooltip:
  

  App/src/components/AvatarCropModal/Slider.tsx

  Lines 59 to 67 in 7561439

  	{tooltipIsVisible && (
  	<Tooltip
  	text={translate('common.zoom')}
  	shiftVertical={-2}
  	>
  	{/* pointerEventsNone is a workaround to make sure the pan gesture works correctly on mobile safari */}
  	<View style={[styles.sliderKnobTooltipView, styles.pointerEventsNone]} />
  	</Tooltip>
  	)}

• It will make sure when slider is panning, the tooltip does not display.

• Then in this PR, we need to add the styles.pointerEventsNone to make sure the pan gesture works correctly on mobile safari.

• And because of styles.pointerEventsNone, the tooltip is not displayed in desktop when hovering over the slider.

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

• Because the tooltip only appears in the device that has hover support, so we can remove the:
  

  App/src/components/AvatarCropModal/Slider.tsx

  Lines 59 to 67 in 7561439

  	{tooltipIsVisible && (
  	<Tooltip
  	text={translate('common.zoom')}
  	shiftVertical={-2}
  	>
  	{/* pointerEventsNone is a workaround to make sure the pan gesture works correctly on mobile safari */}
  	<View style={[styles.sliderKnobTooltipView, styles.pointerEventsNone]} />
  	</Tooltip>
  	)}

  
  if DeviceCapabilities.hasHoverSupport() is false then remove styles.pointerEventsNone styles. Below is detail:

{tooltipIsVisible && hasHoverSupport && (
                        <Tooltip
                            text={translate('common.zoom')}
                            shiftVertical={-2}
                        >
                            <View style={[styles.sliderKnobTooltipView]} />
                        </Tooltip>
                    )}

• Then, we need to remove the unnecessary call like:
  

  App/src/components/AvatarCropModal/Slider.tsx

  Line 39 in 7561439

  runOnJS(setTooltipIsVisible)(false);

  
  and
  

  App/src/components/AvatarCropModal/Slider.tsx

  Line 46 in 7561439

  runOnJS(setTooltipIsVisible)(true);

  
  if hasHoverSupport is false.

What alternative solutions did you explore? (Optional)

[greg-schroeder]

Sent through for proposal review

[melvin-bot]

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

[melvin-bot]

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