Просмотр исходного кода

Fix elevation tooltip position: appear above cursor, not over profile

Previously the tooltip was vertically centred on the cursor Y, which
placed it directly over the elevation profile line most of the time.

New logic: prefer above the cursor (cy - height - 8px gap); fall back
to below (cy + 8px) only when there is not enough space above. Keeps
existing left-clamping so it never overflows the canvas edge.

No backend restart required.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
k4be 8 часов назад
Родитель
Сommit
71c91a8289
1 измененных файлов с 14 добавлено и 2 удалено
  1. 14 2
      gpx-vis-frontend/js/elevation.js

+ 14 - 2
gpx-vis-frontend/js/elevation.js

@@ -280,8 +280,20 @@ const Elevation = (() => {
     tooltip.innerHTML = formatTooltip(point, trackMeta);
     tooltip.classList.add('visible');
     const cRect = canvas.getBoundingClientRect();
-    tooltip.style.left = Math.min(cx + 10, cRect.width  - tooltip.offsetWidth  - 4) + 'px';
-    tooltip.style.top  = Math.max(4,        cy - tooltip.offsetHeight / 2)           + 'px';
+    const tw = tooltip.offsetWidth;
+    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);
+
+    tooltip.style.left = Math.max(0, left) + 'px';
+    tooltip.style.top  = top + 'px';
   }
 
   function hideTooltip() {