diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index 26ea6bf..50279b7 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -374,14 +374,17 @@
     const chartContainer = document.getElementById('latency-chart');
     const tooltip = document.getElementById('chart-tooltip');
     const crosshair = document.getElementById('chart-crosshair');
+    let _hoverX = null; // track last mouse x for re-rendering tooltip on chart update
 
-    chartContainer.addEventListener('mousemove', (e) => {
+    function updateTooltip(mx) {
       const canvas = document.getElementById('chart-canvas');
-      if (!canvas._regionPoints) return;
-      const rect = canvas.getBoundingClientRect();
-      const mx = e.clientX - rect.left;
+      if (!canvas._regionPoints || mx == null) {
+        tooltip.classList.add('hidden');
+        crosshair.classList.add('hidden');
+        return;
+      }
 
-      const result = getRunGroup(mx, canvas._regionPoints, canvas._cW, canvas._pad);
+      const result = getRunGroup(mx, canvas._regionPoints);
       if (!result) {
         tooltip.classList.add('hidden');
         crosshair.classList.add('hidden');
@@ -417,9 +420,16 @@
       const left = result.x + 12;
       tooltip.style.left = (left + tw > containerW ? result.x - tw - 12 : left) + 'px';
       tooltip.style.top = '4px';
+    }
+
+    chartContainer.addEventListener('mousemove', (e) => {
+      const rect = document.getElementById('chart-canvas').getBoundingClientRect();
+      _hoverX = e.clientX - rect.left;
+      updateTooltip(_hoverX);
     });
 
     chartContainer.addEventListener('mouseleave', () => {
+      _hoverX = null;
       tooltip.classList.add('hidden');
       crosshair.classList.add('hidden');
     });
@@ -497,6 +507,7 @@
       });
       trimChartRuns();
       renderChart();
+      updateTooltip(_hoverX);
     });
   </script>