implement tooltips, begin block tooltips

scripts/planner.js

@@ -122,10 +122,65 @@ function buildBlockPicker() {
   atlasMetadata.forEach((m, i) => {
     const item = grid.makeItem();
     item.dataset.index = i.toString(10);
-    console.log(m);
+    if (m.modules["plannerator:display_name"].display_name === "Lithium Heat Sink") {
+      console.log(m);
+void {
+  "cooling": 130,
+  "rules": [
+    {
+      "rules": [
+        {
+          "rules": [
+            {
+              "min": 2,
+              "max": 2,
+              "block": {
+                "metadata": 1,
+                "name": "nuclearcraft:solid_fission_sink2",
+                "type": "legacy_block",
+                "blockstate": {
+                  "type": "lead"
+                }
+              },
+              "type": "between"
+            },
+            {
+              "min": 1,
+              "max": 1,
+              "block": {
+                "metadata": 1,
+                "name": "nuclearcraft:solid_fission_sink2",
+                "type": "legacy_block",
+                "blockstate": {
+                  "type": "lead"
+                }
+              },
+              "type": "axial"
+            }
+          ],
+          "type": "and"
+        },
+        {
+          "min": 1,
+          "max": 6,
+          "block": {
+            "name": "nuclearcraft:overhaul_sfr:casing",
+            "type": "module"
+          },
+          "type": "between"
+        }
+      ],
+      "type": "and"
+    }
+  ]
+}
+    }
     item.dataset.tooltip = createTooltip([
         m.modules["plannerator:display_name"].display_name,
-
+        ...("nuclearcraft:overhaul_sfr:heat_sink" in m.modules ? [
+            "Heatsink",
+            `Cooling: ${m.modules["nuclearcraft:overhaul_sfr:heat_sink"].cooling ?? "???"} H/t`,
+        ] : []),
     ]).toString(10);
     if (!filter.test(m.modules["plannerator:display_name"].display_name)) {
       item.classList.add("hidden");

scripts/tooltip.js

@@ -3,20 +3,26 @@ import { emitEvent, listenTo } from "./events.js";
 
 const tooltips = {};
 let tooltipsCounter = 0;
-let lastTarget = null;
+let lastCoordinates = null;
 let suppressTooltips = false;
+let activeTooltipTarget = null;
 
 export function initializeTooltips() {
   window.addEventListener("mousemove", () => {
-    if (lastTarget !== null) {
+    if (lastCoordinates !== null) {
       emitEvent("tooltips:hide");
     }
-    lastTarget = null;
+    lastCoordinates = null;
   });
   window.addEventListener("mousemove", debounce(e => {
-    lastTarget = e.target;
+    lastCoordinates = { x: e.pageX, y: e.pageY };
     emitEvent("tooltips:show");
   }, 500));
+  window.addEventListener("wheel", () => {
+    if (lastCoordinates !== null) {
+      setTimeout(() => emitEvent("tooltips:show"), 200);
+    }
+  });
 
   listenTo("tooltips:show", showTooltip);
   listenTo("tooltips:hide", hideTooltip);
@@ -45,19 +51,38 @@ export function deleteTooltip(id) {
 
 function showTooltip() {
   if (suppressTooltips) return;
-  if (!lastTarget.dataset.tooltip) return;
+  if (!lastCoordinates) return;
+  if (activeTooltipTarget) hideTooltip();
 
-  const dom = createTooltipDom(lastTarget.dataset.tooltip);
+  const target = document.elementFromPoint(lastCoordinates.x, lastCoordinates.y);
+  if (!target) return;
+  if (!target.dataset.tooltip) return;
+
+  const dom = createTooltipDom(target.dataset.tooltip);
   if (!dom) return;
 
-  lastTarget.appendChild(dom);
+  const targetRect = target.getBoundingClientRect();
+  dom.style.left = `${targetRect.left}px`;
+  dom.style.top = `${targetRect.bottom}px`;
+
+  target.appendChild(dom);
+
+  const domRect = dom.getBoundingClientRect();
+  const windowWidth = window.innerWidth, windowHeight = window.innerHeight;
+  dom.style.left = `${Math.min(targetRect.left, windowWidth - domRect.width)}px`;
+  dom.style.top = `${Math.min(targetRect.bottom, windowHeight - domRect.height)}px`;
+
+  activeTooltipTarget = target;
 }
 function hideTooltip() {
   if (suppressTooltips) return;
-  if (!lastTarget.dataset.tooltip) return;
+  if (!activeTooltipTarget) return;
 
-  console.log(lastTarget.querySelector(".tooltip"))
-  lastTarget.removeChild(lastTarget.querySelector(".tooltip"));
+  const tooltip = activeTooltipTarget.querySelector(".tooltip");
+  if (!tooltip) return;
+
+  activeTooltipTarget.removeChild(tooltip);
+  activeTooltipTarget = null;
 }
 
 function createTooltipDom(id) {