fix: flip tooltip to left/top when near chart edges (#68)

adibarra · web-flow · commit c4a1eb07c2c2 · 2026-03-23T11:09:19.000-05:00
* fix: flip tooltip to left/top when near chart edges

* fix: bump tooltip z-index to render above legend

* fix: flip tooltip to left/top when near chart container edges
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -19,6 +19,7 @@ import type {
   ZoomContext,
 } from '@/lib/d3-chart/D3Chart/types';
 import type { ContinuousScale } from '@/lib/d3-chart/types';
+import { computeTooltipPosition } from '@/lib/d3-chart/layers/scatter-points';
 import {
   POINT_SIZE,
   HIT_AREA_RADIUS,
@@ -1062,7 +1063,8 @@ const ScatterGraph = React.memo(
                 .on('mousemove', function (event) {
                   if (chartRef.current?.isPinned()) return;
                   const [mx, my] = d3.pointer(event, container);
-                  tooltip.style('left', `${mx + 10}px`).style('top', `${my + 10}px`);
+                  const pos = computeTooltipPosition(mx, my, tooltip, container);
+                  tooltip.style('left', `${pos.left}px`).style('top', `${pos.top}px`);
                 })
                 .on('mouseleave', function () {
                   if (chartRef.current?.isPinned()) return;
@@ -1074,13 +1076,14 @@ const ScatterGraph = React.memo(
                 .on('click', function (event, d) {
                   event.stopPropagation();
                   const [mx, my] = d3.pointer(event, container);
+                  tooltip.html(generateOverlayTooltipContent(createOverlayConfig(d, true)));
+                  const pos = computeTooltipPosition(mx, my, tooltip, container);
                   tooltip
-                    .style('left', `${mx + 10}px`)
-                    .style('top', `${my + 10}px`)
+                    .style('left', `${pos.left}px`)
+                    .style('top', `${pos.top}px`)
                     .style('opacity', 1)
                     .style('display', 'block')
                     .style('pointer-events', 'auto');
-                  tooltip.html(generateOverlayTooltipContent(createOverlayConfig(d, true)));
 
                   // Position rulers at clicked point
                   const ct = d3.zoomTransform(svgNode);
diff --git a/packages/app/src/components/ui/d3-chart-wrapper.tsx b/packages/app/src/components/ui/d3-chart-wrapper.tsx
@@ -80,7 +80,7 @@ export function D3ChartWrapper({
                 opacity: pinnedPoint ? 1 : 0,
                 pointerEvents: pinnedPoint ? 'auto' : 'none',
                 display: pinnedPoint ? 'block' : 'none',
-                zIndex: 10,
+                zIndex: 50,
               }}
             />
             {noDataOverlay}
diff --git a/packages/app/src/hooks/useChartTooltipHandlers.ts b/packages/app/src/hooks/useChartTooltipHandlers.ts
@@ -1,5 +1,6 @@
 import * as d3 from 'd3';
 import { useCallback } from 'react';
+import { computeTooltipPosition } from '@/lib/d3-chart/layers/scatter-points';
 import { useStickyTooltip } from './useStickyTooltip';
 
 export type RulerType = 'vertical' | 'horizontal' | 'crosshair' | 'none';
@@ -271,9 +272,10 @@ export function useChartTooltipHandlers<TData>(): ChartTooltipHandlers<TData> {
           if (isPinned()) return;
 
           const rect = containerElement.getBoundingClientRect();
-          tooltipElement
-            .style('left', `${event.clientX - rect.left + 10}px`)
-            .style('top', `${event.clientY - rect.top + 10}px`);
+          const mx = event.clientX - rect.left;
+          const my = event.clientY - rect.top;
+          const pos = computeTooltipPosition(mx, my, tooltipElement, containerElement);
+          tooltipElement.style('left', `${pos.left}px`).style('top', `${pos.top}px`);
         })
         .on('mouseleave', function (_event, d) {
           if (isPinned()) return;
@@ -292,15 +294,18 @@ export function useChartTooltipHandlers<TData>(): ChartTooltipHandlers<TData> {
         .on('click', function (event, d) {
           event.stopPropagation();
 
-          // Position tooltip near the clicked point
+          // Set content first so dimensions are available for position calc
           const rect = containerElement.getBoundingClientRect();
+          const mx = event.clientX - rect.left;
+          const my = event.clientY - rect.top;
+          tooltipElement.html(config.generateTooltipContent(d, true));
+          const pos = computeTooltipPosition(mx, my, tooltipElement, containerElement);
           tooltipElement
-            .style('left', `${event.clientX - rect.left + 10}px`)
-            .style('top', `${event.clientY - rect.top + 10}px`)
+            .style('left', `${pos.left}px`)
+            .style('top', `${pos.top}px`)
             .style('opacity', 1)
             .style('display', 'block')
-            .style('pointer-events', 'auto')
-            .html(config.generateTooltipContent(d, true));
+            .style('pointer-events', 'auto');
 
           // Position rulers at the clicked point
           const { curX: currentXScale, curY: currentYScale } = getZoomedScales();
diff --git a/packages/app/src/lib/d3-chart/layers/scatter-points.ts b/packages/app/src/lib/d3-chart/layers/scatter-points.ts
@@ -192,7 +192,8 @@ export function attachScatterTooltipHandlers<
     .on('mousemove', function (event) {
       if (isPinned()) return;
       const [mx, my] = d3.pointer(event, container);
-      tooltip.style('left', `${mx + 10}px`).style('top', `${my + 10}px`);
+      const pos = computeTooltipPosition(mx, my, tooltip, container);
+      tooltip.style('left', `${pos.left}px`).style('top', `${pos.top}px`);
     })
     .on('mouseleave', function (_event, d) {
       if (isPinned()) return;
@@ -203,13 +204,14 @@ export function attachScatterTooltipHandlers<
     .on('click', function (event, d) {
       event.stopPropagation();
       const [mx, my] = d3.pointer(event, container);
+      tooltip.html(generateTooltipContent(d, true));
+      const pos = computeTooltipPosition(mx, my, tooltip, container);
       tooltip
-        .style('left', `${mx + 10}px`)
-        .style('top', `${my + 10}px`)
+        .style('left', `${pos.left}px`)
+        .style('top', `${pos.top}px`)
         .style('opacity', 1)
         .style('display', 'block')
         .style('pointer-events', 'auto');
-      tooltip.html(generateTooltipContent(d, true));
       pinTooltip(d, false);
       onPointClick?.(d, tooltip);
       trackEvent?.(String(d.hwKey), d.x, d.y);
@@ -222,6 +224,34 @@ export function attachScatterTooltipHandlers<
     });
 }
 
+/** Compute tooltip left/top, flipping when it would overflow the chart container. */
+export function computeTooltipPosition(
+  mx: number,
+  my: number,
+  tooltip:
+    | d3.Selection<HTMLDivElement | null, unknown, null, undefined>
+    | d3.Selection<HTMLDivElement, unknown, null, undefined>,
+  container: HTMLElement,
+  offset = 10,
+): { left: number; top: number } {
+  const node = tooltip.node();
+  if (!node) return { left: mx + offset, top: my + offset };
+
+  // Ensure tooltip is measurable
+  node.style.display = 'block';
+
+  // Force reflow so we get real dimensions
+  const tw = node.getBoundingClientRect().width || node.offsetWidth;
+  const th = node.getBoundingClientRect().height || node.offsetHeight;
+  const cw = container.clientWidth;
+  const ch = container.clientHeight;
+
+  const left = mx + offset + tw > cw ? mx - offset - tw : mx + offset;
+  const top = my + offset + th > ch ? my - offset - th : my + offset;
+
+  return { left, top };
+}
+
 /** Update scatter point positions on zoom. */
 export function updateScatterPointsOnZoom(
   zoomGroup: d3.Selection<SVGGElement, unknown, null, undefined>,
