[HOLD for payment 2022-03-08] Feature Request: Add a tooltip to Avatars in the LHN - Reported by @mananjadhav

[mvtglobally]

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

---

Action Performed:

1. Open app
2. Hover over the list of names in LHN

Expected Result:

Tooltip should appear with the details

Actual Result:

Nothing happens on the hover

Workaround:

Unknown

Platform:

Where is this issue occurring?

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

Version Number: 1.1.25-0
Reproducible in staging?: n/a
Reproducible in production?: n/a
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2021-12-28.at.8.42.19.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @mananjadhav
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1640704361161500

View all open jobs on GitHub

[MelvinBot]

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

[sobitneupane]

Proposal:
One way is to add Tooltip in OptionRow.js. It will solve the issue both for sidebarlink in LHN and also for search results in RHN.

+ <Tooltip text = {props.option.text}>
                                    <MultipleAvatars
                                        avatarImageURLs={props.option.icons}
                                        size={props.mode === 'compact' ? 'small' : 'default'}
                                        secondAvatarStyle={[
                                            StyleUtils.getBackgroundAndBorderStyle(props.backgroundColor),
                                            props.optionIsFocused
                                                ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor)
                                                : undefined,
                                            hovered && !props.optionIsFocused
                                                ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor)
                                                : undefined,
                                        ]}
                                        isDefaultChatRoom={props.option.isDefaultChatRoom}
                                        isArchivedRoom={props.option.isArchivedRoom}
                                    />
+ </Tooltip>

The other way is to add Tooltip in MultipleAvatars.js. This way will be appropriate if we want to show tooltip for all the use cases of MultipleAvatrars. Or, We can add showTooltipText prop to MultipleAvatar.js. If showTooltipText is true, Tooltip text will be shown.

[mananjadhav]

Proposal

I reported this, and I am proposing a solution pending 1 comment to clarify:

1. Add a tooltip prop to MultipleAvatar
2. Wrap the <View> with <Tooltip text={props.tooltip}>. This has to be done at the following two places:

App/src/components/MultipleAvatars.js

Lines 46 to 50 in 7af06bc

	if (props.avatarImageURLs.length === 1) {
	return (
	<View style={avatarContainerStyles}>
	<Avatar
	source={props.avatarImageURLs[0]}

and

App/src/components/MultipleAvatars.js

Lines 59 to 62 in 7af06bc

	return (
	<View pointerEvents="none" style={avatarContainerStyles}>
	<View
	style={singleAvatarStyles}

3. Set this tooltip prop to HeaderView, OptionRow, and if required in IOUPreview as well

If it has to be enabled only for Multiple participants (which I don't recommend), then we should add tooltipEnabled flag

Based on the flag we'll have the children rendered either inside Tooltip or <></>

[muttmuure]

I saw @marcaaron and @michelle-thompson give a thumbs up so I'm going to push this one along

[MelvinBot]

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

[sketchydroide]

Hmm, I don't think this is a bug, it would be a nice feature to add for sure, but I don't know if it's something we are looking to do in the near future.