Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltips open on touchmove #2447

Open
Josh68 opened this issue Apr 4, 2023 · 1 comment
Open

Tooltips open on touchmove #2447

Josh68 opened this issue Apr 4, 2023 · 1 comment

Comments

@Josh68
Copy link
Contributor

Josh68 commented Apr 4, 2023

Describe the bug
MCT-8250 was opened because users scrolling through Medicare plan search results are seeing tooltips open as they scroll, on mobile devices.

It appears the event handlers for the CMSDS Tooltip might be tweaked to avoid having this happen.

As an example of what might be expected, on a touch device or with touch emulated, try scrolling with a finger on this example from the react-tooltip library.

To Reproduce
Steps to reproduce the behavior:

  1. Go to MCT search results
  2. Click on "Back to drugs and pharmacies," then add at least one drug and a pharmacy or 2
  3. Back on the search results page, on mobile or desktop with devtools open and responsive/mobile mode with touch emulation, try to scroll the page with your finger on some of the tooltip triggers, like the ones that read "Retail pharmacy: Estimated total drug + premium cost"
  4. Tooltips will open as you try to scroll

You can reproduce the same issue on the DS documentation Tooltip page

Expected behavior
Scrolling with a finger should not open tooltips. Tapping on tooltip triggers should open them.

Screenshots

tooltip_touchmove

Desktop (please complete the following information):

  • OS: Mobile, also desktop with responsive/mobile emulation
  • Browser: Chrome
  • Version: Evergreen (latest)

Smartphone (please complete the following information):

  • Device: Replicated on Pixel 4
  • OS: Unknown (assume Android 12 or 13)
  • Browser: Assume stock, Chrome
  • Version: Assume latest

Additional context
Add any other context about the problem here.

@zarahzachz
Copy link
Collaborator

zarahzachz commented Jul 15, 2024

I believe the design system needs to do an overhaul of how Tooltip is built.

The current implementation makes use of buttons and links as triggers for the Tooltip, but semantically speaking, links should navigate users to a place and buttons should perform an action. Based on this understanding of these tags, the correct element for a trigger would be to use the button tag, however... buttons aren't easily styled for inline text (button text can't wrap to a new line and flow within a paragraph, for example). So the prevailing idea is Tooltips should only follow the pattern established in the icon trigger example, but this work hasn't been prioritized.

Additionally, discovery has been done to prove out that the Popover API could replace the PopperJS library. Here's the PR for more info on that API.

The incoming team should evaluate where this refactor fits in their list of priorities, or if it's still valid.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants