Skip to content

fix(popover): support touch-triggered tooltips - #2377

Open
dancormier wants to merge 6 commits into
mainfrom
STACKS-913/fix-mobile-tooltip-triggers
Open

fix(popover): support touch-triggered tooltips#2377
dancormier wants to merge 6 commits into
mainfrom
STACKS-913/fix-mobile-tooltip-triggers

Conversation

@dancormier

@dancormier dancormier commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

Summary

  • toggle Svelte tooltips when their references are activated by touch
  • limit hover behavior to hover-capable pointers and respond to capability changes
  • preserve keyboard focus behavior and existing dismissal behavior
  • document touch, mouse, keyboard, cursor, and dismissal expectations
  • add regression coverage for touch, hybrid devices, mouse input, and capability changes

Jira

STACKS-913

NXT-303

Testing locally

  1. Install dependencies from the repository root with npm ci.
  2. Start Stacks Svelte Storybook with npm run storybook -w packages/stacks-svelte.
  3. Open the Popover Tooltip story.
  4. In Chrome DevTools, enable the device toolbar and select a mobile device so pointer events are simulated as touch input.
  5. Tap the Tooltip reference. The tooltip should open on the first tap and close on the second tap.
  6. Open it again and tap outside the tooltip. The tooltip should close.
  7. Disable device emulation and verify that mouse hover and keyboard focus still open the tooltip.

Accessibility

  • keyboard focus continues to open tooltips
  • touch users can open and dismiss tooltip content
  • Escape, focus leave, outside click, and repeat touch dismissal remain supported
  • mouse clicks do not independently trigger tooltips

Changeset

Patch release for @stackoverflow/stacks-svelte.

@netlify

netlify Bot commented Aug 24, 2026

Copy link
Copy Markdown

Deploy Preview for stacks ready!

Name Link
🔨 Latest commit 9f1658d
🔍 Latest deploy log https://app.netlify.com/projects/stacks/deploys/6a91c4e8d730da0007096773
😎 Deploy Preview https://deploy-preview-2377--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@changeset-bot

changeset-bot Bot commented Aug 24, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9f1658d

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

This PR includes changesets to release 1 package
Name Type
@stackoverflow/stacks-svelte Patch

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

@netlify

netlify Bot commented Aug 24, 2026

Copy link
Copy Markdown

Deploy Preview for stackoverflow-email ready!

Name Link
🔨 Latest commit 9f1658d
🔍 Latest deploy log https://app.netlify.com/projects/stackoverflow-email/deploys/6a91c4e82dd21d0008acc7a0
😎 Deploy Preview https://deploy-preview-2377--stackoverflow-email.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@dancormier
dancormier marked this pull request as ready for review August 24, 2026 16:50
@dancormier
dancormier requested a review from a team as a code owner August 24, 2026 16:50
@asblanco

asblanco commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

1. Medium — Component contract still documents tooltip mode as hover-only

At Popover.svelte:85:
STACKS-913 requires this interaction contract to be documented, but the public tooltip prop still describes tooltip mode as hover-only. Should we document touch toggling, keyboard focus, mouse behavior, and supported dismissal methods in the prop or component documentation?

Comment thread packages/stacks-svelte/src/components/Popover/Popover.test.ts
@asblanco

Copy link
Copy Markdown
Contributor

I was able to test it on my iPhone 16 Pro on Safari and on Qwant browsers and it worked well on both 🎉

ScreenRecording_08-28-2026.12-30-05_1.mov

I just posted with Codex 3 findings, have a look at them if they make sense for you to act on

@dancormier

Copy link
Copy Markdown
Contributor Author

Addressed review finding 1 in 118e54669. The public tooltip prop now documents hover-capable pointer behavior, keyboard focus, touch toggling, mouse-click behavior, and supported dismissal methods.

@dancormier
dancormier requested a review from asblanco August 28, 2026 17:40
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

Successfully merging this pull request may close these issues.

3 participants