diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index 4c267f7..aa4ca6b 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -472,10 +472,11 @@
// ── Status bar hover tooltip ──────────────────────────────────────
const statusBar = document.getElementById('status-bar');
const statusTooltip = document.getElementById('status-tooltip');
+ let _hoveredSeg = null;
- statusBar.addEventListener('mousemove', (e) => {
- const seg = e.target.closest('[data-run]');
- if (!seg) { statusTooltip.classList.add('hidden'); return; }
+ function updateStatusTooltip() {
+ const seg = _hoveredSeg;
+ if (!seg || !seg.parentElement) { statusTooltip.classList.add('hidden'); _hoveredSeg = null; return; }
const up = parseInt(seg.dataset.up || '0');
const down = parseInt(seg.dataset.down || '0');
@@ -493,7 +494,6 @@
html += `
Status${statusLabel}
`;
html += `Uptime${uptimePct}%
`;
- // Region breakdown
let regions = [];
try { regions = JSON.parse(seg.dataset.regions || '[]'); } catch {}
if (regions.length > 0) {
@@ -514,7 +514,6 @@
statusTooltip.innerHTML = html;
statusTooltip.classList.remove('hidden');
- // Position horizontally centered on the segment
const barRect = statusBar.getBoundingClientRect();
const segRect = seg.getBoundingClientRect();
const segCenter = segRect.left + segRect.width / 2 - barRect.left;
@@ -523,9 +522,17 @@
if (left < 0) left = 0;
if (left + tw > barRect.width) left = barRect.width - tw;
statusTooltip.style.left = left + 'px';
+ }
+
+ statusBar.addEventListener('mousemove', (e) => {
+ const seg = e.target.closest('[data-run]');
+ if (!seg) { statusTooltip.classList.add('hidden'); _hoveredSeg = null; return; }
+ _hoveredSeg = seg;
+ updateStatusTooltip();
});
statusBar.addEventListener('mouseleave', () => {
+ _hoveredSeg = null;
statusTooltip.classList.add('hidden');
});
@@ -591,6 +598,7 @@
bar.appendChild(seg);
while (bar.children.length > 60) bar.removeChild(bar.firstChild);
}
+ updateStatusTooltip();
}
// Pings table — prepend row, cap at 100