Bug report: poor tooltip position - find wallet

[konopkja]

Describe the bug

in some instances the tooltip is too far from the text

To reproduce

1. Go to https://ethereum.org/en/wallets/find-wallet/
2. Click on wallet detail

Expected behavior

the tooltip should be right after the text without blank gap

Screenshots

No response

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Additional context

No response

Would you like to work on this issue?

• Yes
• No

[Dharmik79]

@konopkja I would like to work on this issue

[konopkja]

@Dharmik79 thank you so much for offering your help! I will assign you the task :) assigned you the issue. @pabloped since we had some issues handling this internally adding you here for review.

[wackerow]

I can't find my original comment at the moment, but yeah just noting this is a little tricky because when the text wraps from being too long, the browser doesn't collapse the container width to the now-wrapped text, it just fills the full width (which is what pushes that (i) all the way to the right edge when the text wraps)...

We could make this display: inline; with the text, but then the (i) would be like this:

Some really long example
name here (i)

...which is not what @konopkja is requesting here. Not sure the best way to keep the (i) right next to the text block when it's multiple lines tbh.

[konopkja]

Hello @Dharmik79 what is the status on this task?

[Dharmik79]

@konopkja The issue is with the css property, and using display:inline it does not fix the issue. We need to use another method for that.

[konopkja]

cc @pettinarip @wackerow

[pettinarip]

Hmm I don't have atm a better solution than the one @wackerow mentioned. I think moving the (i) icon inside the paragraph would make it follow the width of the text. Is not exactly what was requested but I think it will look good and consistent as well.

[Dharmik79]

@pettinarip @wackerow Can we remove the (i) icon and set the tooltip from the text itself?

[konopkja]

@pettinarip @wackerow Can we remove the (i) icon and set the tooltip from the text itself?

its good idea to consider different solutions, this one though would probably not be good for mobile devices apart from also being less clear. Id advise against it.

[wackerow]

One approach that I mentioned elsewhere is slightly messier, but it seems to work:

Inside src/components/FindWallet/WalletTable/WalletMoreInfoCategory.tsx, before if (feature.category === sectionName) on line 61, insert:

const lastWord = feature.label.split(" ").pop()

Then rearrange the tooltip below as follows:

                <Text px={1} lineHeight={1}>
                  {feature.label}

                  <Text as="span" whiteSpace="nowrap">
                    {lastWord}
                    <Tooltip
                      content={
                        <Text color="body.base !important">
                          {t(walletFilterData[feature.filterKey].description)}
                        </Text>
                      }
                    >
                      <Box as="span" ms="2">
                        <Icon as={MdInfoOutline} color={featureColor} />
                      </Box>
                    </Tooltip>
                  </Text>
                </Text>

1. Pulls the Tooltip into the feature.label span, so it lays inline with the text
2. Adds a margin-start of half a rem (ms="2") to icon box
3. Breaks off the last word and wraps it in a nowrap span with the icon, so the icon never lays on it's own line alone

Probably a cleaner way to do it, but this is the result:
ltr:

rtl:

May need to just clean up the vertical alignment a little with the above, but it seems to be a solution to the posted problem.m

[Dharmik79]

@wackerow This solution looks pretty good, I will implement this and will create the pull request for the same.

[github-actions]

This issue is stale because it has been open 30 days with no activity.