Tooltip and full asset name

[609harsh]

Proposed Changes

• Fixes Lengthy asset name is not properly handled in asset list page #7787
• Asset name is available based on space available
• Tooltip is added so that full name is visible

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[vercel]

@609harsh is attempting to deploy a commit to the Open Healthcare Network Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	6b47289
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/665068a1788cc400096d8f41
😎 Deploy Preview	https://deploy-preview-7828--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nihal467]

@609harsh

• Don't show this tooltip for all asset names. Show it only for assets with lengthy names, similar to the screenshot attached in the issue. When the user hovers over those cards, display the tooltip.
• fix the cypress failure

[609harsh]

@609harsh

• Don't show this tooltip for all asset names. Show it only for assets with lengthy names, similar to the screenshot attached in the issue. When the user hovers over those cards, display the tooltip.
• fix the cypress failure

Hi @rithviknishad how can 1st one be done? please suggest

[rithviknishad]

As a simple fix, we can show tooltip only if name length is beyond certain length. Although it may not guarantee in all screen sizes and zoom levels.

Not sure if there are better alternative ways to achieve that fix via CSS. @skks1212 Any ideas?

[skks1212]

If we follow conventions, I believe we should use a simple title prop rather than a tooltip for all names regardless of length.
We can also keep a toggle on the name. If you click/hover on it, rather than a tooltip, the full name is toggled. Just suggesting.
Keeping the popup dependant on length doesn't seem like a good idea to me
cc. @rithviknishad

[609harsh]

@nihal467 what should be done next? Since displaying dynamic tooltip can only be possible by length of text but it will not insure all screen sizes give similar results. i guess we can go ahead with displaying tooltip to all names or remove it for all as most of the time valid asset name will be smaller.

[khavinshankar]

@609harsh

can you try out what @skks1212 suggested

We can also keep a toggle on the name. If you click/hover on it, rather than a tooltip, the full name is toggled. Just suggesting.

and also fix the cypress issue