Add broken tooltip feature

compupro · Nov 30, 2018 · a8f13e4 · a8f13e4
1 parent dbcbf07
commit a8f13e4
Showing 1 changed file with 41 additions and 5 deletions.
diff --git a/latin_annotator.js b/latin_annotator.js
@@ -76,15 +76,42 @@ class Word {
         this.HTMLelement.className = "wordElement";
         this.HTMLelement.innerHTML = (wordString == "\n") ? "<br />" : wordString;
         this.HTMLelement.id = this.wordID;
-
+        
         var self = this;
         this.HTMLelement.addEventListener("click", function(){
             self.clicked();
         });
+        this.HTMLelement.addEventListener("mouseover", function(){
+            self.mousedover();
+        });
+        this.HTMLelement.addEventListener("mouseout", function(){
+            self.hideTooltip();
+        });
 
         document.getElementById("wordElementContainer").appendChild(this.HTMLelement);
     }
-
+
+    mousedover(){
+        if (this.definition == null){
+            this.getWordDefinitions(false, false, null, true)
+        } else {
+            this.showTooltip();
+        }
+    }
+
+    showTooltip(){
+        var tooltip = document.createElement("div");
+        tooltip.id = "tooltip"; 
+        var meaning = document.createTextNode(this.getSelectedEntry().meaning);
+        tooltip.appendChild(meaning);
+        document.getElementById("wordElementContainer").appendChild(tooltip);
+    }
+
+    hideTooltip(){
+        var tooltip = document.getElementById("tooltip");
+        tooltip.remove();
+    }
+
     //When the word's wordElement gets clicked, this runs.
     clicked(){
         currentPassage.clearHighlights();
@@ -94,7 +121,7 @@ class Word {
             this.updateDefinitionView();
             this.checkSentenceAgreement();
         } else {
-            this.getWordDefinitions(true, true, null);
+            this.getWordDefinitions(true, true, null, false);
         }
     }
 
@@ -190,7 +217,7 @@ class Word {
 
     /*Gets word definitions as an XML document which is passed to updateWordDefinition()
     Optionally runs updateView and/or checkSentenceAgreement if set. I would have used callbacks for that but it didn't work.*/
-    getWordDefinitions(updateView, checkSentenceAgreement, otherWord){
+    getWordDefinitions(updateView, checkSentenceAgreement, otherWord, showTooltip){
         var x = new XMLHttpRequest();
         x.open("GET", ALPHEIOS_PERL_URL+this.wordNoPunctuation, true);
 
@@ -211,6 +238,9 @@ class Word {
                         self.agree();
                     }
                 }
+                if (showTooltip){
+                    self.showTooltip();
+                }
             }
         }
         x.send(null);
@@ -279,7 +309,7 @@ class Word {
             if (wordObj.sentence == this.sentence && wordID != this.wordID &&
                 wordObj.wordString != "\n"){
                 if (wordObj.definition == null){
-                    wordObj.getWordDefinitions(false, false, this.getSelectedInfl());
+                    wordObj.getWordDefinitions(false, false, this.getSelectedInfl(), false);
                 } else if (wordObj.agreesWith(this.getSelectedInfl())){
                     wordObj.agree();
                 }
@@ -413,6 +443,12 @@ class Word {
         this.HTMLelement.classList.add("agrees");
     }
 
+    getSelectedEntry(){
+        var entryNumber = this.definition.selectedEntry;
+        var entry = this.definition.entries[entryNumber];
+        return entry;
+    }
+
     getSelectedInfl(){
         var entryNumber = this.definition.selectedEntry;
         var inflNumber = this.definition.selectedInfl;