Improve hover tooltip rendering and pointer behavior in InteractiveGraphics

[seveibar]

Motivation

• Tooltips for interactive shapes were rendering beneath other elements or interfering with pointer interactions.
• The line tooltip used an SVG foreignObject, which had positioning and event limitations across browsers.
• Hit-testing for interactive elements should not be blocked by tooltip overlays.

Description

• Added zIndex: 200 and pointerEvents: "none" to tooltip containers in Circle.tsx, Point.tsx, Polygon.tsx, and Rect.tsx to ensure tooltips appear above content and do not capture pointer events.
• Replaced the SVG foreignObject tooltip in Line.tsx with an absolutely positioned HTML div and wrapped the SVG and tooltip in a fragment to allow sibling elements.
• Kept existing hit-testing behavior for lines by preserving the transparent wide polyline used for click detection and maintaining pointer event configuration on SVG elements.
• Preserved tooltip content via Tooltip component and ensured positioning still follows mouse coordinates for lines.

Testing

• Ran yarn build to verify TypeScript compilation and the build pipeline, which completed successfully.
• Ran the test suite with yarn test, and unit tests passed.
• Ran yarn lint to confirm formatting and lint rules, which reported no errors.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
graphics-debug	Ready	Preview, Comment	Mar 31, 2026 8:24pm