changes (a lot)

main.js

@@ -7,13 +7,15 @@ let words = {}
 
 let currentFont = "r";
 
+let timeout = "";
+
 function init() {
     // createWordList();
     // injectWords();
     // document.querySelector("#popup-container").addEventListener("click", () => {
         // document.querySelector("#popup-container").style.opacity = 0;
         // document.querySelector("#popup-container").style.pointerEvents = "none";
-    // })
+    // });
     // above are commented out until wordlist is added~
     document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
 }
@@ -29,6 +31,31 @@ function showPopup(word) {
     c.style.pointerEvents = "all";
 }
 
+function showSmolPopup(word) {
+    let p = document.querySelector("#smol-popup");
+    p.querySelector("h1").innerText = word;
+    p.querySelector("#smol-heo").innerText = words[word]["heonian"];
+    p.querySelector("#smol-type").innerText = words[word]["type"];
+    p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
+    p.style.opacity = 1;
+    p.style.pointerEvents = "all";
+}
+
+function checkHover(word) {
+    if (timeout != "") {
+        clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+        showSmolPopup(word);
+    }, 450);
+}
+
+function clearHover() {
+    if (timeout != "") {
+        clearTimeout(timeout);
+    }
+}
+
 function createWordList() { //sometimes i really dislike javascript..
     let t = document.querySelector("tbody");
     t.querySelectorAll("tr").forEach(element => {
@@ -66,6 +93,14 @@ function injectWords() {
                     element.addEventListener('click', function(e) {
                         showPopup(element.innerText);
                     }, false);
+                    element.addEventListener('mouseover', function(e) {
+                        checkHover(element.innerText);
+                    }
+                    , false);
+                    element.addEventListener('mouseout', function(e) {
+                        clearHover();
+                    }
+                    , false);
                 });
             }
         });