slightly less nefariously terrible code

web/public/index.js

@@ -2,9 +2,7 @@ const codeCoverageDiv = document.querySelector("#code-coverage");
 const flameGraphDiv = document.querySelector("#flame-graph");
 
 function drawText(text, codeCoverageData) {
-    const tooltip = document.createElement("div");
-    tooltip.style.position = "fixed";
-    document.body.appendChild(tooltip);
+    const tooltip = document.getElementById("covers-tooltip");
     const entries = codeCoverageData.toSorted((a, b) => b.index - a.index);
     const charEntries = {};
     const elements = [];
@@ -26,19 +24,42 @@ function drawText(text, codeCoverageData) {
         const span = document.createElement("span");
         span.style.backgroundColor = color(Math.min(entry.covers / 25, 1));
         span.innerText = text[index];
-        span.addEventListener("mouseover", (event) => {
-            tooltip.style.display = "block";
-            tooltip.style.left = `${event.clientX + 20}px`;
-            tooltip.style.top = `${event.clientY + 20}px`;
-            tooltip.innerText = `Ran ${entry.covers} time${
-                entry.covers !== 1 ? "s" : ""
-            }`;
-        });
+        span.dataset.covers = entry.covers;
         elements.push(span);
         col += 1;
     }
-
+    function positionInBox(position, boundingRect) {
+        const [x, y] = position;
+        const outside = x < boundingRect.left ||
+            x >= boundingRect.right || y < boundingRect.top ||
+            y >= boundingRect.bottom;
+        return !outside;
+    }
     testytestytesty.append(...elements);
+    document.addEventListener("mousemove", (event) => {
+        const [x, y] = [event.clientX, event.clientY];
+        const outerBox = testytestytesty.getBoundingClientRect();
+        if (!positionInBox([x, y], outerBox)) {
+            console.log("+");
+            return;
+        }
+        const element = elements.find((element) => {
+            if (!element.dataset?.covers) {
+                return false;
+            }
+            const isIn = positionInBox([x, y], element.getBoundingClientRect());
+            return isIn;
+        });
+        if (!element) {
+            tooltip.hidden = true;
+            return;
+        }
+        const covers = parseInt(element.dataset.covers);
+        tooltip.hidden = false;
+        tooltip.style.left = `${event.clientX + 20}px`;
+        tooltip.style.top = `${event.clientY + 20}px`;
+        tooltip.innerText = `Ran ${covers} time${covers !== 1 ? "s" : ""}`;
+    });
 }
 
 function loadCodeCoverage(text, codeCoverageData) {
@@ -213,10 +234,10 @@ const flameGraphData = JSON.parse(
     `{"fn":0,"acc":257,"parent":0,"children":[{"fn":18,"acc":251,"parent":0,"children":[{"fn":12,"acc":30,"parent":1,"children":[]}]}]}`,
 );
 
-drawText(codeData, codeCoverageData);
 loadCodeCoverage(codeData, codeCoverageData);
 loadFlameGraph(flameGraphData, {
     0: "<entry>",
     12: "add",
     18: "main",
 });
+drawText(codeData, codeCoverageData);