FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Component | Tooltip, Crosshair: Touch support via Pointer Events by rokotyan · Pull Request #133 · ExaForce/unovis · GitHub

Repository navigation

Component | Tooltip, Crosshair: Touch support via Pointer Events - #133

Draft
rokotyan wants to merge 8 commits into
mainfrom
tooltip-crosshair-touch-support
Draft

rokotyan wants to merge 8 commits into
mainfrom
tooltip-crosshair-touch-support

Conversation

rokotyan commented Oct 2, 2026 •
edited
Loading

Copy link
Copy Markdown

Touch support for Tooltip and Crosshair. Tracking: ExaForce/operations#98698

ScreenRecording_10-02-2026.10-20-24_1.mp4

Why

Tooltip and Crosshair only listened to mouse events. After a tap, browsers synthesize compatibility mouse events but no mouseout/mouseleave until the next tap elsewhere in the document. As a result:

  • the tooltip sticks after the finger lifts, and in an embedded WebView (the mobile app) it sticks forever;
  • a touch drag can't scrub the crosshair;
  • iOS can treat the first tap as a hover and swallow click.

What

  • Pointer Events: Tooltip and Crosshair listen to pointer events, and mouse hover behaves as before.
  • Touch: a touch shows them only while the finger is down: on pointerdown, then following the finger, until pointerup or pointercancel. hideDelay is respected, and fingers after the first are ignored.
  • Dragging across elements: Tooltip releases the implicit touch pointer capture on the chart, so a drag moves from segment to segment, from bar to bar, and across components. This also works when the touch starts on an axis.
  • Trigger events: on a trigger match, Tooltip still calls stopPropagation(), now on pointermove and pointerdown.
  • followTouchMove: a new Crosshair option, true by default. XYContainer sets touch-action: pinch-zoom on its SVG, so the crosshair follows the finger in both X and XY snap modes.
  • Other charts: charts without a Crosshair keep the browser defaults: the page scrolls, and click events still fire.
  • Fixes:
    • Pen taps now show the tooltip, and a pen gesture cancelled for scrolling hides it.
    • Re-touching within hideDelay no longer hides the new tooltip.
    • On iOS, touch boundary events without relatedTarget no longer hide the crosshair.
  • LeafletMap TopoJSON: the feature under the pointer is now resolved on pointermove/pointerdown. Before, the tooltip lagged one event behind and didn't work on touch.
  • Timeline: the synthetic scroll refresh event is now pointermove.

Behavior changes (for the release notes)

  • Synthetic MouseEvents no longer drive Tooltip and Crosshair. Dispatch pointermove/pointerleave/pointerout instead. Where there's no PointerEvent (older jsdom), use new MouseEvent('pointermove', …).
  • On XY charts with a Crosshair, a swipe that starts on the chart no longer scrolls the page. Set followTouchMove: false to restore it.
  • onCrosshairMove receives a PointerEvent (or a WheelEvent).
  • Mouse moves during d3 brush, drag and zoom gestures now update the Tooltip and Crosshair. d3 suppresses mousemove during those gestures but not pointermove.

Checklist

  • Core (packages/ts) + unit tests (tooltip.spec.ts, crosshair.spec.ts)
  • Dev example: Tooltip: Touch
  • Wrappers (Angular regenerated for followTouchMove)
  • Docs: Tooltip, Crosshair, LeafletMap, MCP WebView
  • MCP widget test and Cypress/Playwright helpers moved to pointer events

Verification

  • Unit tests: vitest 35/35.
  • MCP: tests 164/164, plus the real-browser smoke lane.
  • Playwright tooltip suite (Chromium): 11 passed, 5 skipped. The 5 LeafletMap tests are skipped by the spec itself.
  • Builds: build:ts, build:react, build:angular and build:dev pass.
  • Chromium real touch (CDP):
    • hold shows the tooltip, and lift hides it
    • a tap still fires the segment click
    • a vertical swipe on a chart without a Crosshair scrolls the page and hides the tooltip
    • the Crosshair scrubs horizontally and vertically, including in XY snap mode
    • the tooltip moves from bar to bar and from a point to a line
    • a second-finger tap and re-touching within hideDelay behave correctly
    • the LeafletMap TopoJSON feature tooltip is correct with mouse and touch
  • iOS 26.5 Simulator Safari: hold/lift, tap → click, vertical swipe, horizontal scrub. This ran before the switch from pan-y pinch-zoom to pinch-zoom.
  • Cypress tooltip.cy.ts: 7 failures from expectations that were already stale. The Playwright port of the same tests passes.

Not covered yet

  • A real Android device.
  • Desktop WebKit and Firefox (the Playwright browsers aren't installed).
  • The iOS loupe on a long hold. -webkit-user-select: none on the chart container removes it; that's left as a follow-up.

Generated by @rokotyan with Claude Opus 5.5

rokotyan force-pushed the tooltip-crosshair-touch-support branch from c89121b to 5cccb94 Compare October 2, 2026 17:23
rokotyan force-pushed the tooltip-crosshair-touch-support branch from 0c27fe8 to 9ee0900 Compare October 2, 2026 18:01
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
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.

1 participant


Back | FazBrowse Home | New Git URL