asfdjksdjfk

main.js

@@ -10,17 +10,18 @@ let currentFont = "r";
 let timeout = "";
 
 function init() {
-    // createWordList();
+    createWordList();
     // injectWords();
-    // document.querySelector("#popup-container").addEventListener("click", () => {
-        // document.querySelector("#popup-container").style.opacity = 0;
-        // document.querySelector("#popup-container").style.pointerEvents = "none";
-    // });
+    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();});
 }
 
 function showPopup(word) {
+    clearHover();
     let p = document.querySelector("#popup");
     let c = document.querySelector("#popup-container")
     p.querySelector("h1").innerText = word;
@@ -31,7 +32,7 @@ function showPopup(word) {
     c.style.pointerEvents = "all";
 }
 
-function showSmolPopup(word) {
+function showSmolPopup(word, event) {
     let p = document.querySelector("#smol-popup");
     p.querySelector("h1").innerText = word;
     p.querySelector("#smol-heo").innerText = words[word]["heonian"];
@@ -39,14 +40,20 @@ function showSmolPopup(word) {
     p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
     p.style.opacity = 1;
     p.style.pointerEvents = "all";
+    // set position to cursor position
+    let rect = document.body.getBoundingClientRect();
+    let x = event.clientX - rect.left;
+    let y = event.clientY - rect.top;
+    p.style.left = x - 100 + "px";
+    p.style.top = y + 25 + "px";
 }
 
-function checkHover(word) {
+function checkHover(word, event) {
     if (timeout != "") {
         clearTimeout(timeout);
     }
     timeout = setTimeout(() => {
-        showSmolPopup(word);
+        showSmolPopup(word, event);
     }, 450);
 }
 
@@ -54,6 +61,9 @@ function clearHover() {
     if (timeout != "") {
         clearTimeout(timeout);
     }
+    let p = document.querySelector("#smol-popup");
+    p.style.opacity = 0;
+    p.style.pointerEvents = "none";
 }
 
 function createWordList() { //sometimes i really dislike javascript..
@@ -94,7 +104,7 @@ function injectWords() {
                         showPopup(element.innerText);
                     }, false);
                     element.addEventListener('mouseover', function(e) {
-                        checkHover(element.innerText);
+                        checkHover(element.innerText, e);
                     }
                     , false);
                     element.addEventListener('mouseout', function(e) {