Bladeren bron

Fix elevation tooltip: check viewport space, not canvas-local space

The previous fix checked whether topAbove >= 0 in canvas coordinates.
Since the canvas is only 120px tall and the tooltip can be ~110px
(name + date + dist + ele + time + coords), the check almost always
failed and fell through to 'below'.

Now the above/below decision uses viewport coordinates:
  cursorViewportY = canvasRect.top + cy
  fitsAbove = cursorViewportY - tooltipHeight - gap >= 0

The tooltip is position:absolute inside the container (no overflow
hidden), so a negative top value is allowed and places it visually
above the chart panel — which is exactly what we want.

No backend restart required.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
k4be 8 uur geleden
bovenliggende
commit
ea9c3f6876
1 gewijzigde bestanden met toevoegingen van 10 en 7 verwijderingen
  1. 10 7
      gpx-vis-frontend/js/elevation.js

+ 10 - 7
gpx-vis-frontend/js/elevation.js

@@ -284,13 +284,16 @@ const Elevation = (() => {
     const th = tooltip.offsetHeight;
     const gap = 8;
 
-    // Prefer above cursor; fall back to below if not enough room
-    const topAbove = cy - th - gap;
-    const top = topAbove >= 0 ? topAbove : cy + gap;
-
-    // Prefer right of indicator; clamp to canvas bounds
-    const leftRight = cx + gap;
-    const left = Math.min(leftRight, cRect.width - tw - 4);
+    // Decide above/below using viewport coordinates so the tooltip can
+    // float above the chart container when needed (container has no
+    // overflow:hidden, so negative top values are fine).
+    const cursorViewportY = cRect.top + cy;
+    const fitsAbove = cursorViewportY - th - gap >= 0;
+    // top is relative to the container (may be negative = above the panel)
+    const top = fitsAbove ? cy - th - gap : cy + gap;
+
+    // Prefer right of the indicator line; clamp within canvas width
+    const left = Math.min(cx + gap, cRect.width - tw - 4);
 
     tooltip.style.left = Math.max(0, left) + 'px';
     tooltip.style.top  = top + 'px';