grundfunktion tooltip

itooltip.css

@@ -0,0 +1,10 @@
+tooltip {
+  display:block;
+  width: 300px;
+  background-color: rgba(0,0,0,0.8);
+  color: #fff;
+  border: 3px solid #fff;
+  border-radius: 0.5em;
+  padding: 0.5em;
+
+}

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) {
+  var loadToolTip = function(ev) {
-    if(!target.dataset.url) return;
+    if(!ev.target.dataset.url) return;
-    var url = target
+    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);
+        console.log('Ajax:',this.responseText);
-        //TODO
+        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);
     });
   }
 })();

itooltip.min.css

@@ -0,0 +1 @@
+tooltip{display:block;width:300px;background-color:rgba(0,0,0,.8);color:#fff;border:3px solid #fff;border-radius:.5em;padding:.5em}

itooltip.min.js

@@ -0,0 +1,2 @@
+!function(){"use strict";for(var buildToolTip=function(ev,content){var mouseX=ev.pageX,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)},loadToolTip=function(ev){if(ev.target.dataset.url){var url=ev.target.dataset.url;console.log("URL:",url);var xmlhttp=new XMLHttpRequest;xmlhttp.onreadystatechange=function(){4==this.readyState&&200==this.status&&(console.log("Ajax:",this.responseText),buildToolTip(ev,this.responseText))},xmlhttp.open("GET",url,!0),xmlhttp.send()}},destroyToolTip=function(ev){for(var tts=document.getElementsByTagName("tooltip"),i=0;i<tts.length;i++)tts[i].remove()},fadeIn=function(el){el.classList.remove("hidden")},elems=document.getElementsByClassName("itooltip"),i=0;i<elems.length;i++)elems[i].addEventListener("mouseenter",(function(ev){loadToolTip(ev)})),elems[i].addEventListener("mouseleave",(function(ev){destroyToolTip(ev)}))}();
+//# sourceMappingURL=itooltip.min.js.map

itooltip.min.js.map

@@ -0,0 +1,54 @@
+{
+    "version": 3,
+    "sources": [
+        "itooltip.js"
+    ],
+    "names": [
+        "buildToolTip",
+        "ev",
+        "content",
+        "mouseX",
+        "pageX",
+        "mouseY",
+        "pageY",
+        "console",
+        "log",
+        "tt",
+        "document",
+        "createElement",
+        "classList",
+        "add",
+        "style",
+        "cssText",
+        "tn",
+        "createTextNode",
+        "appendChild",
+        "body",
+        "loadToolTip",
+        "target",
+        "dataset",
+        "url",
+        "xmlhttp",
+        "XMLHttpRequest",
+        "onreadystatechange",
+        "this",
+        "readyState",
+        "status",
+        "responseText",
+        "open",
+        "send",
+        "destroyToolTip",
+        "tts",
+        "getElementsByTagName",
+        "i",
+        "length",
+        "remove",
+        "fadeIn",
+        "el",
+        "elems",
+        "getElementsByClassName",
+        "addEventListener"
+    ],
+    "mappings": "CAAA,WACE,aA6CA,IA3CA,IAAIA,aAAe,SAASC,GAAGC,SAG7B,IAAIC,OAASF,GAAGG,MACZC,OAASJ,GAAGK,MAChBC,QAAQC,IAAIL,OAAOE,QACnB,IAAII,GAAKC,SAASC,cAAc,WAChCF,GAAGG,UAAUC,IAAI,UACjBJ,GAAGK,MAAMC,QAAS,4BAA4Bd,GAAGK,MAAM,IAAI,aAAcL,GAAGG,MAAO,MACnF,IAAIY,GAAKN,SAASO,eAAef,SACjCO,GAAGS,YAAYF,IACfN,SAASS,KAAKD,YAAYT,KAGxBW,YAAc,SAASnB,IACzB,GAAIA,GAAGoB,OAAOC,QAAQC,IAAtB,CACA,IAAIA,IAAMtB,GAAGoB,OAAOC,QAAQC,IAC5BhB,QAAQC,IAAI,OAAOe,KACnB,IAAIC,QAAU,IAAIC,eAClBD,QAAQE,mBAAqB,WACJ,GAAnBC,KAAKC,YAAkC,KAAfD,KAAKE,SAC/BtB,QAAQC,IAAI,QAAQmB,KAAKG,cACzB9B,aAAaC,GAAG0B,KAAKG,gBAGzBN,QAAQO,KAAK,MAAOR,KAAK,GACzBC,QAAQQ,SAGNC,eAAiB,SAAShC,IAE5B,IADA,IAAIiC,IAAMxB,SAASyB,qBAAqB,WAC/BC,EAAG,EAAEA,EAAEF,IAAIG,OAAOD,IACzBF,IAAIE,GAAGE,UAIPC,OAAS,SAASC,IAEpBA,GAAG5B,UAAU0B,OAAO,WAIlBG,MAAQ/B,SAASgC,uBAAuB,YACnCN,EAAG,EAAEA,EAAEK,MAAMJ,OAAOD,IAC3BK,MAAML,GAAGO,iBAAiB,cAAa,SAAS1C,IAC9CmB,YAAYnB,OAEdwC,MAAML,GAAGO,iBAAiB,cAAa,SAAS1C,IAC9CgC,eAAehC,OAnDrB",
+    "file": "itooltip.js"
+}