Improve tooltip responsiveness and mobile accessibility

[latin-panda]

Description

Replace native browser title tooltips with a custom component (e.g., PrimeVue or similar) to eliminate display latency and provide mobile support. Ensuring that helpful information is immediately discoverable and accessible via long-press on touch devices.

Review tooltip messages to ensure they are clear and helpful for user guidance.

---

Checklist

• Does it need UI/UX design?
  • Yes. Describe the UI/UX requirements or attach a Figma link in the "Design" section.
  • No
• Does it need API design?
  • Yes. Specify the endpoints, methods, or data structures needed.
  • No
• Does it need design around state flow?
  • Yes. Outline the state flow requirements.
  • No
• Does it need a test plan?
  • Yes. Add the test plan as a comment in this task or attach the document.
  • No

---

User Stories

• As a [user type],
  I want [functionality],
  so that [benefit].

---

Design

• Figma: [Insert URL]
• Design Docs: [Insert URL]

---

Dependencies

---

Additional Notes

---

Related Issues

[latin-panda]

fyi @alyblenkin

[alyblenkin]

Would love to know how complex it would be to implement something similar to what we did with Collect. Could we reuse the dialog component for deleting a shape and display the icons with brief descriptions? One thing that is going to be tricky is space (more buttons more problems).

[latin-panda]

Would love to know how complex it would be to implement something similar to what we did with Collect. Could we reuse the dialog component for deleting a shape and display the icons with brief descriptions? One thing that is going to be tricky is space (more buttons more problems).

@alyblenkin I've commented in Figma.
I also consider a help mode toggle. There are 2 options that come to mind that we could implement:

1. Full-size image of the component with some explanation, displayed in an overlay/modal, e.g. a map picture and arrows explaining controls:

It comes with downsides: hard to translate, hard to update, and heavy loading. Pro side, it's quick to implement.

2. All tooltips are activated and remain visible until the user exits help mode. When the user taps the question button, all tooltips appear and stay visible, but they block some areas of the UI until the user exits help mode.

Downside: makes UI busy if we put too many tooltips. Pro side: easy to translate and update, lightweight, clear, and not complex to implement.

[alyblenkin]

Sorry I missed this earlier. Documenting all the options discussed so far:

• 1. Full screen overlay with descriptions

  • Pros: Keeps the UI clean when not using
  • Cons: visually overwhelming, hard to translate and keep current

• 2. Info button or long press to reveal

  • Pros: Keeps the UI clean; long press doesn't require an info button
  • Cons: Low discoverability for long press, showing 8 labels at once might be hard
  • Accessibility: we will need to aria-describedby so screen readers announce the hint when the button is focused

• 3. Dialog with icons and descriptions

  • Pros: Consistent with Collect, highly accessible, plenty of room for translated text
  • Cons: icons might look like buttons

• 4. Progressive disclosure / contextual onboarding: subtle pulsing dot or a "New" badge on the button itself. Tapping it triggers the explanation once.

  • Pros: Keep the UI clean
  • Cons: Not ideal for our users given we don't know if they've seen it before. Potentially distracting.

I would lean towards 2 or 3. Possibly more towards option 3 because we have a lot of buttons.

[latin-panda]

@alyblenkin, I just remember that we also use tooltips in the paste-and-upload coordinates dialog, so it needs a solution that works well on mobile.

About the "dialog explaining the icons" alternative:
We could style it more simply to avoid it looking like a clickable menu (e.g., by removing dividers). However, since this wouldn't work for the coordinates dialog, we’d still need a separate solution for that and other features requiring tooltips (possibly file uploads and ranking, as example).

On the other hand, using an info button to display tooltips is a versatile fix that works for the coordinates dialog without feeling like a context switch.

I recommend running the Figma by the QA team to get their feedback on the usability: what would they expect to see and do there?