fix: flip tooltip to left/top when near chart container edges

Author: adibarra

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();

packages/app/src/lib/d3-chart/layers/scatter-points.ts

@@ -224,7 +224,7 @@ export function attachScatterTooltipHandlers<
     });
 }
 
-/** Compute tooltip left/top, flipping to the opposite side when near container edges. */
+/** Compute tooltip left/top, flipping when it would overflow the chart container. */
 export function computeTooltipPosition(
   mx: number,
   my: number,
@@ -235,8 +235,14 @@ export function computeTooltipPosition(
   offset = 10,
 ): { left: number; top: number } {
   const node = tooltip.node();
-  const tw = node?.offsetWidth ?? 0;
-  const th = node?.offsetHeight ?? 0;
+  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;