fade in out css

fade.css

@@ -0,0 +1,10 @@
+.fadeable {
+  opacity: 0;
+  margin-top: -30px;
+  transition: margin-top 0.2s,opacity 0.2s;
+}
+
+.fadeable.visible {
+  opacity: 1;
+  margin-top: 0;
+}

fade.min.css

@@ -0,0 +1 @@
+.fadeable{opacity:0;margin-top:-30px;transition:margin-top .2s,opacity .2s}.fadeable.visible{opacity:1;margin-top:0}

itooltip.js

@@ -1,28 +1,24 @@
 ( function() {
   'use strict';
 
-  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;";
-    tt.innerHTML = content;
-    document.body.appendChild(tt);
-  }
-
   var loadToolTip = function(ev) {
+    //destroyToolTip(ev);
     if(!ev.target.dataset.url) return;
+
+    var tt = document.createElement('tooltip');
+    tt.classList.add('fadeable');
+    tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ (ev.pageX+10) +"px;";
+    document.body.appendChild(tt);
+
     var url = ev.target.dataset.url;
-    console.log('URL:',url);
+    //console.log('URL:',url);
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
-      if (this.readyState == 4 && this.status == 200) {
+      if (this.readyState == 4) {
-        console.log('Ajax:',this.responseText);
+        if(this.status == 200) {
-        buildToolTip(ev,this.responseText);
+          tt.innerHTML = this.responseText;
+          tt.classList.add('visible');
+        }
       }
     };
     xmlhttp.open("GET", url, true);
@@ -31,16 +27,14 @@
 
   var destroyToolTip = function(ev) {
     var tts = document.getElementsByTagName('tooltip');
-    for (var i =0;i<tts.length;i++) {
+    if(tts[0]) {
-      tts[i].remove();
+      tts[0].classList.remove('visible');
+      setTimeout(function() {
+        if(tts[0]) tts[0].remove();
+      },500);
     }
   }
 
-  var fadeIn = function(el) {
-    //TODO fancy fadein
-    el.classList.remove('hidden');
-  }
-
   //class itooltip
   var elems = document.getElementsByClassName('itooltip');
   for (var i =0;i<elems.length;i++) {

itooltip.min.js

@@ -1,2 +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;",tt.innerHTML=content,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)}))}();
+!function(){"use strict";for(var loadToolTip=function(ev){if(ev.target.dataset.url){var tt=document.createElement("tooltip");tt.classList.add("fadeable"),tt.style.cssText="position:absolute; top: "+(ev.pageY+10)+"px; left: "+(ev.pageX+10)+"px;",document.body.appendChild(tt);var url=ev.target.dataset.url,xmlhttp=new XMLHttpRequest;xmlhttp.onreadystatechange=function(){4==this.readyState&&200==this.status&&(tt.innerHTML=this.responseText,tt.classList.add("visible"))},xmlhttp.open("GET",url,!0),xmlhttp.send()}},destroyToolTip=function(ev){var tts=document.getElementsByTagName("tooltip");tts[0]&&(tts[0].classList.remove("visible"),setTimeout((function(){tts[0]&&tts[0].remove()}),500))},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

@@ -4,15 +4,11 @@
         "itooltip.js"
     ],
     "names": [
-        "buildToolTip",
+        "loadToolTip",
         "ev",
-        "content",
+        "target",
-        "mouseX",
+        "dataset",
-        "pageX",
+        "url",
-        "mouseY",
-        "pageY",
-        "console",
-        "log",
         "tt",
         "document",
         "createElement",
@@ -20,34 +16,31 @@
         "add",
         "style",
         "cssText",
-        "innerHTML",
+        "pageY",
+        "pageX",
         "body",
         "appendChild",
-        "loadToolTip",
-        "target",
-        "dataset",
-        "url",
         "xmlhttp",
         "XMLHttpRequest",
         "onreadystatechange",
         "this",
         "readyState",
         "status",
+        "innerHTML",
         "responseText",
         "open",
         "send",
         "destroyToolTip",
         "tts",
         "getElementsByTagName",
-        "i",
-        "length",
         "remove",
-        "fadeIn",
+        "setTimeout",
-        "el",
         "elems",
         "getElementsByClassName",
+        "i",
+        "length",
         "addEventListener"
     ],
-    "mappings": "CAAA,WACE,aA4CA,IA1CA,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,MACnFK,GAAGO,UAAYd,QACfQ,SAASO,KAAKC,YAAYT,KAGxBU,YAAc,SAASlB,IACzB,GAAIA,GAAGmB,OAAOC,QAAQC,IAAtB,CACA,IAAIA,IAAMrB,GAAGmB,OAAOC,QAAQC,IAC5Bf,QAAQC,IAAI,OAAOc,KACnB,IAAIC,QAAU,IAAIC,eAClBD,QAAQE,mBAAqB,WACJ,GAAnBC,KAAKC,YAAkC,KAAfD,KAAKE,SAC/BrB,QAAQC,IAAI,QAAQkB,KAAKG,cACzB7B,aAAaC,GAAGyB,KAAKG,gBAGzBN,QAAQO,KAAK,MAAOR,KAAK,GACzBC,QAAQQ,SAGNC,eAAiB,SAAS/B,IAE5B,IADA,IAAIgC,IAAMvB,SAASwB,qBAAqB,WAC/BC,EAAG,EAAEA,EAAEF,IAAIG,OAAOD,IACzBF,IAAIE,GAAGE,UAIPC,OAAS,SAASC,IAEpBA,GAAG3B,UAAUyB,OAAO,WAIlBG,MAAQ9B,SAAS+B,uBAAuB,YACnCN,EAAG,EAAEA,EAAEK,MAAMJ,OAAOD,IAC3BK,MAAML,GAAGO,iBAAiB,cAAa,SAASzC,IAC9CkB,YAAYlB,OAEduC,MAAML,GAAGO,iBAAiB,cAAa,SAASzC,IAC9C+B,eAAe/B,OAlDrB",
+    "mappings": "CAAA,WACE,aAsCA,IApCA,IAAIA,YAAc,SAASC,IAEzB,GAAIA,GAAGC,OAAOC,QAAQC,IAAtB,CAEA,IAAIC,GAAKC,SAASC,cAAc,WAChCF,GAAGG,UAAUC,IAAI,YACjBJ,GAAGK,MAAMC,QAAS,4BAA4BV,GAAGW,MAAM,IAAI,cAAeX,GAAGY,MAAM,IAAK,MACxFP,SAASQ,KAAKC,YAAYV,IAE1B,IAAID,IAAMH,GAAGC,OAAOC,QAAQC,IAExBY,QAAU,IAAIC,eAClBD,QAAQE,mBAAqB,WACJ,GAAnBC,KAAKC,YACW,KAAfD,KAAKE,SACNhB,GAAGiB,UAAYH,KAAKI,aACpBlB,GAAGG,UAAUC,IAAI,aAIvBO,QAAQQ,KAAK,MAAOpB,KAAK,GACzBY,QAAQS,SAGNC,eAAiB,SAASzB,IAC5B,IAAI0B,IAAMrB,SAASsB,qBAAqB,WACrCD,IAAI,KACLA,IAAI,GAAGnB,UAAUqB,OAAO,WACxBC,YAAW,WACNH,IAAI,IAAIA,IAAI,GAAGE,WAClB,OAKFE,MAAQzB,SAAS0B,uBAAuB,YACnCC,EAAG,EAAEA,EAAEF,MAAMG,OAAOD,IAC3BF,MAAME,GAAGE,iBAAiB,cAAa,SAASlC,IAC9CD,YAAYC,OAEd8B,MAAME,GAAGE,iBAAiB,cAAa,SAASlC,IAC9CyB,eAAezB,OA5CrB",
     "file": "itooltip.js"
 }