Hide tooltips on touchend event

[iansan5653]

Closes https://github.com/github/primer/issues/4431 (see issue for context)

Adds an event handler to TooltipV2 to hide the tooltip on touch end, so that tooltips automatically hide when the target element is tapped. This prevents tooltips from remaining visible after a button is interacted with, while still allowing touch device users to see tooltips via tapping and holding.

This required converting the onMouseEnter handler to an onMouseOverCapture handler so that it would run first so that the onTouchEnd handler could cancel the pending 50ms timeout. Alternatively I could have wrapped the onTouchEnd handler in its own timeout, but that felt hacky and like a race condition waiting to happen.

I confirmed that this fixes the problem on mobile devices (note I also confirmed that you can view the tooltips with an intentional long tap, but that was hard to capture on video):

screen-20250328-124320.mp4

And does not regress showing the tooltip on hover/focus:

Screen.Recording.2025-03-28.at.1.12.34.PM.mov

Changelog

New

Changed

• Hide TooltipV2 tooltips on touch-end

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 5d4987d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	104.93 KB (-0.05% 🔽)
packages/react/dist/browser.umd.js	105.37 KB (+0.03% 🔺)

[iansan5653]

I really tried hard to write tests for this, but I can't find a way to assert that the tooltip is open/closed in Jest in CI. I tried testing for toBeVisible, matches(":popover-open"), and toHaveClass(":popover-open") but none of them worked (the last did work locally but not in CI). I guess this is why there are no existing tests for popover visibility.

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/370353

[primer-integration]

🟢 golden-jobs completed with status success.

[jonrohan]

Not sure if this will be problematic in integrations in dotcom?

[francinelucca]

LGTM!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!