dashboard: don't recreate tooltip on change

1 files changed, 16 insertions, 1 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 73b7d30..8ea06e5 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -508,10 +508,25 @@ function upright(attrs) {
 function text(node, content) {
   if (node.textContent !== content) node.textContent = content;
 }
+// A tooltip whose text changes under the pointer goes and comes back (the ages in it
+// change on every render): its new text waits until the pointer leaves.
+const tooltipsDue = new WeakMap();
 function tooltip(node, content) {
   let title = node.firstElementChild;
   if (!title) node.append(title = svg("title"));
-  text(title, content);
+  if (title.textContent === content || !title.textContent || !node.matches(":hover")) {
+    tooltipsDue.delete(node);
+    text(title, content);
+    return;
+  }
+  if (!tooltipsDue.has(node)) {
+    node.addEventListener("mouseleave", () => {
+      const due = tooltipsDue.get(node);
+      tooltipsDue.delete(node);
+      if (due !== undefined) text(title, due);
+    }, { once: true });
+  }
+  tooltipsDue.set(node, content);
 }
 // `root` showing `children`, in order: the others go, and only what is out of place
 // moves.