Merge pull request #112 from mollthecoder/main

Brand new tooltip.js

mods/oldTooltip.js

@@ -0,0 +1,23 @@
+const defaultTooltip = "---";
+let tooltipEle;
+window.addEventListener("load", ()=>{
+  tooltipEle = document.createElement("p");
+  tooltipEle.innerHTML = defaultTooltip;
+  setTimeout(()=>{
+    document.getElementById("extraInfo").children[1].appendChild(tooltipEle);
+    let buttons = document.getElementsByClassName("elementButton");
+    [...buttons].forEach(button=>{
+      let ele = button.getAttribute("element");
+      button.addEventListener("mouseenter", e=>{
+        if(elements.hasOwnProperty(ele)) {
+          if(elements[ele].hasOwnProperty("desc")) {
+            tooltipEle.innerHTML = elements[ele].desc;
+          }
+        }
+      });
+      button.addEventListener("mouseleave", e=>{
+        tooltipEle.innerHTML = defaultTooltip;
+      });
+    });
+  });
+});

mods/tooltip.js

@@ -1,23 +1,32 @@
-const defaultTooltip = "---";
+const devMode = false;
-let tooltipEle;
+// Tippy depends on popper
+const popperUrl = devMode ? "https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js" : "https://unpkg.com/@popperjs/core@2";
+const tippyUrl = devMode ? "https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js" : "https://unpkg.com/tippy.js@6";
 window.addEventListener("load", ()=>{
-  tooltipEle = document.createElement("p");
+  let popper = document.createElement("script");
-  tooltipEle.innerHTML = defaultTooltip;
+  popper.src = popperUrl;
-  setTimeout(()=>{
+  popper.addEventListener("load", () => {
-    document.getElementById("extraInfo").children[1].appendChild(tooltipEle);
+    let tippyScr = document.createElement("script");
-    let buttons = document.getElementsByClassName("elementButton");
+    tippyScr.src = tippyUrl;
-    [...buttons].forEach(button=>{
+    tippyScr.addEventListener("load", ()=>main(), {passive: true});
-      let ele = button.getAttribute("element");
+    document.body.appendChild(tippyScr);
-      button.addEventListener("mouseenter", e=>{
+  }, {passive: true});
-        if(elements.hasOwnProperty(ele)) {
+  document.body.appendChild(popper);
-          if(elements[ele].hasOwnProperty("desc")) {
+}, {passive: true});
-            tooltipEle.innerHTML = elements[ele].desc;
+function main() {
+  [...document.getElementsByClassName("elementButton")].forEach(button=>{
+    let ele = elements[button.getAttribute("element")];
+    // if(ele === undefined || ele === null) return;
+    if(ele.desc) {
+      button.setAttribute("data-tippy-content", `<div>${ele.desc}</div>`);
+      if(ele.desc.includes("<!--INTERACTIVE-->")) {
+        button.setAttribute("data-tippy-interactive", true);
       }
     }
   });
-      button.addEventListener("mouseleave", e=>{
+  tippy("[data-tippy-content]", {
-        tooltipEle.innerHTML = defaultTooltip;
+    allowHTML: true,
-      });
+    duration: 0,
-    });
+    placement: "bottom"
-  });
   });
+}