diff --git a/mods/oldTooltip.js b/mods/oldTooltip.js
new file mode 100644
index 00000000..abb3bc03
--- /dev/null
+++ b/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;
+      });
+    });
+  });
+});
diff --git a/mods/tooltip.js b/mods/tooltip.js
index abb3bc03..ddd4708e 100644
--- a/mods/tooltip.js
+++ b/mods/tooltip.js
@@ -1,23 +1,32 @@
-const defaultTooltip = "---";
-let tooltipEle;
+const devMode = false;
+// 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");
-  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;
-      });
-    });
+  let popper = document.createElement("script");
+  popper.src = popperUrl;
+  popper.addEventListener("load", () => {
+    let tippyScr = document.createElement("script");
+    tippyScr.src = tippyUrl;
+    tippyScr.addEventListener("load", ()=>main(), {passive: true});
+    document.body.appendChild(tippyScr);
+  }, {passive: true});
+  document.body.appendChild(popper);
+}, {passive: true});
+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);
+      }
+    }
   });
-});
+  tippy("[data-tippy-content]", {
+    allowHTML: true,
+    duration: 0,
+    placement: "bottom"
+  });
+}