Skip to content

fix: Close tooltip when cursor leaves chart via y-axis#4350

Open
Who-is-PS wants to merge 7 commits intomainfrom
dev-v3-philosr-tooltip-chart
Open

fix: Close tooltip when cursor leaves chart via y-axis#4350
Who-is-PS wants to merge 7 commits intomainfrom
dev-v3-philosr-tooltip-chart

Conversation

@Who-is-PS
Copy link
Member

@Who-is-PS Who-is-PS commented Mar 12, 2026

Description

When hovering over a line chart and moving the cursor toward the y-axis labels, the tooltip stays open even after the cursor has completely left the chart area.

Root cause

Two issues in onSVGMouseOut and onPopoverLeave:

  1. onSVGMouseOut used a coordinate-based isMouseOverPopover check with a 12px deadzone around the popover's bounding rect. When the popover is positioned near the y-axis, the cursor's exit coordinates often fell within this deadzone — causing cleanup to be skipped.

  2. onPopoverLeave only cleared highlights when the mouse moved back into the SVG (nodeContains(svg, relatedTarget)). When the mouse exited the popover toward the outside (y-axis exit path), nothing cleared the tooltip.

Solution

  1. onSVGMouseOut: Replaced the coordinate-based isMouseOverPopover check with a DOM-based nodeContains check using popoverRef.current?.parentElement (which includes the transition wrapper). Cleanup is only suppressed when the mouse actually enters the popover DOM tree.

  2. onPopoverLeave: Simplified to unconditionally clear highlights when the mouse leaves the popover (unless handlers are disabled). When mouse returns to the SVG, onSVGMouseMove naturally re-triggers the correct tooltip.

The isMouseOverPopover deadzone check is preserved in onSVGMouseMove where it remains useful for preventing tooltip flickering.

Changes

  • src/mixed-line-bar-chart/hooks/use-mouse-hover.ts — Updated onSVGMouseOut and onPopoverLeave
  • src/mixed-line-bar-chart/__tests__/use-mouse-hover.test.ts — Updated and added tests for both changes

Before:

Bildschirmaufnahme.2026-03-13.um.15.18.11.mov

After:

Bildschirmaufnahme.2026-03-13.um.15.18.31.mov

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov
Copy link

codecov bot commented Mar 12, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.43%. Comparing base (302fd0e) to head (4b1878d).
⚠️ Report is 10 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4350      +/-   ##
==========================================
- Coverage   97.44%   97.43%   -0.01%     
==========================================
  Files         897      901       +4     
  Lines       26395    26454      +59     
  Branches     9525     9531       +6     
==========================================
+ Hits        25721    25776      +55     
- Misses        668      672       +4     
  Partials        6        6              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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