grundfunktion tooltip

itooltip.js

@@ -1,26 +1,40 @@
 ( function() {
   'use strict';
 
-  var buildToolTip = function(content) {
+  var buildToolTip = function(ev,content) {
+    //console.log(ev);
+
+    var mouseX = ev.pageX;
+    var mouseY = ev.pageY;
+    console.log(mouseX,mouseY);
     var tt = document.createElement('tooltip');
     tt.classList.add('hidden');
+    tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ ev.pageX +"px;";
     var tn = document.createTextNode(content);
     tt.appendChild(tn);
+    document.body.appendChild(tt);
   }
 
-  var loadToolTip = function(target) {
-    if(!target.dataset.url) return;
-    var url = target
+  var loadToolTip = function(ev) {
+    if(!ev.target.dataset.url) return;
+    var url = ev.target.dataset.url;
+    console.log('URL:',url);
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
-        console.log('ajax:',this.responseText);
-        //TODO
-
+        console.log('Ajax:',this.responseText);
+        buildToolTip(ev,this.responseText);
       }
     };
     xmlhttp.open("GET", url, true);
-    xmlhttp.send(params);
+    xmlhttp.send();
+  }
+
+  var destroyToolTip = function(ev) {
+    var tts = document.getElementsByTagName('tooltip');
+    for (var i =0;i<tts.length;i++) {
+      tts[i].remove();
+    }
   }
 
   var fadeIn = function(el) {
@@ -32,7 +46,10 @@
   var elems = document.getElementsByClassName('itooltip');
   for (var i =0;i<elems.length;i++) {
     elems[i].addEventListener('mouseenter',function(ev){
-      loadToolTip(ev.target);
+      loadToolTip(ev);
+    });
+    elems[i].addEventListener('mouseleave',function(ev){
+      destroyToolTip(ev);
     });
   }
 })();