瀏覽代碼

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 小時之前
父節點
當前提交
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() {