Add Tooltips to all non-text actions/buttons in New Expensify

[mananjadhav]

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

---

Action Performed:

1. Click on '+' icon on Chat
2. Click on Add attachment and select an image
3. AttachmentModal opens and has an action for download but no text

This has to be handled at multiple places such as Workspace Image Picker, Profile Picture Image Picker, etc.

Expected Result:

This is how Whatsapp shows

Actual Result:

Shows no tooltip/text right now. Only icons.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Upwork job link: https://www.upwork.com/ab/applicants/1426188061929398272/job-details

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @zanyrenney (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[mananjadhav]

Proposal

Enclose all the action items with <Tooltip text={text}> component, which will be picked from translation.

For example, download button would require changes

In HeaderWithCloseButton, downloadButton block would look like:

props.shouldShowDownloadButton && (
	<Tooltip text={props.translate('common.download')}>
	    <TouchableOpacity
	        onPress={props.onDownloadButtonPress}
	        style={[styles.touchableButtonImage]}
	    >
	        <Icon src={Download} />
	    </TouchableOpacity>
    </Tooltip>
)

and translations would be as followed:

In en: {
	common: {
		download: 'Download'
	}
}

and es: {
	common: {
		download: 'Descargar'
	}
} 

[MelvinBot]

Triggered auto assignment to @ctkochan22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[zanyrenney]

sorry @ctkochan22 accidentally unassigned you so reassigned

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

Triggered auto assignment to @michelle-thompson (Design), see these Stack Overflow questions for more details.

[michaelhaxhiu]

Sorry on the delay! Let's get quick input from Design, since this will be a UI theme that's widespread in New Expensify.

[shawnborton]

Makes sense to me.

[michaelhaxhiu]

Do we want to use the same UI theme as WhatsApp? Or do we want a specific spacing, font, and tooltip box?

[mananjadhav]

@parasharrajat I've fixed the broken pointer.

Is this desired?

I also checked the AvatarWithImagePicker tooltip. I guess you're right it isn't needed. Looks a bit weird with the avatar picture on. What are your thoughts? @shawnborton @iwiznia @michaelhaxhiu

[michaelhaxhiu]

Thanks for attempting to fix the placement of the floating tooltips that @parasharrajat brought up!

I am having a hard time seeing the how the tooltip placement changed in the Profile picture example. Did it move it up a few pixels?

[mananjadhav]

No, it isn't changed from my previous commit. But what is happening is that tooltip is showing on the AvatarImage, which looks a bit off when there's a profile picture added.

[parasharrajat]

I meant to point out that Edit Profile tooltip should be over or below the pencil icon instead of profile avatar.

Another issue which I faced was that after tooltip is visible and you click edit ✏️, tooltip never goes away.

[mananjadhav]

@parasharrajat That is what I had tried earlier. The pencil icon is absolute positioned and with the existing tooltip behavior, I haven't been able to position the tooltip properly on the icon.

[michaelhaxhiu]

I meant to point out that Edit Profile tooltip should be over or below the pencil icon instead of profile avatar.

Now I follow you 👌. The tooltip for the profile picture should probably show under the pencil. Right @shawnborton?

[shawnborton]

Can it launch directly above the gray circle that has the pencil icon?

[mananjadhav]

At the moment, our Tooltip doesn't work well with absolute positioned items. Considering the effort involved, we didn't include that in the current scope.

Hence, we skipped the FAB too.
#4499 (comment)

[shawnborton]

Then I would just skip this one yeah?

[mananjadhav]

Then I would just skip this one yeah?

Can do. @michaelhaxhiu @iwiznia What do you think?

[iwiznia]

I am fine skipping for now

[michaelhaxhiu]

Agree, let's skip showing this tooltip for now. We can revisit this later. Thanks for bringing it up @parasharrajat

[parasharrajat]

Regression. Icons the moving up in the composer on Web.

[mananjadhav]

PR Raised

[botify]

🚀 Deployed to staging by @iwiznia in version: 1.0.88-3 🚀

platform	result
🤖 android 🤖	cancelled 🔪
🖥 desktop 🖥	cancelled 🔪
🍎 iOS 🍎	cancelled 🔪
🕸 web 🕸	success ✅

[botify]

🚀 Deployed to production by @roryabraham in version: 1.0.90-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

[michaelhaxhiu]

@roryabraham quick bud check -- this botify chart makes me believe that iOS isn't ready for deploy, which means we shouldn't start the 7 day payment countdown? Is that accurate?

I'd like to make sure I understand for future cases.

[mananjadhav]

@michaelhaxhiu @roryabraham fyi, this PR primarily has an impact on Desktop and Web.

[michaelhaxhiu]

Yep understood as this relates to tooltips that appear upon mouse hover over - that's why I'm a little bit unsure how to handle the botify error concerning iOS (i.e. does it matter)?

[roryabraham]

Sorry for the delayed reply and red-herring comment. That failed iOS prod deploy happened completely independently of this issue, and was completed manually after-the-fact. So I think that this has been solved on prod for more than a week at this point and can be paid/closed out. Thanks!

[michaelhaxhiu]

Paid!