fade in out css

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) {
-        console.log('Ajax:',this.responseText);
-        buildToolTip(ev,this.responseText);
+      if (this.readyState == 4) {
+        if(this.status == 200) {
+          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++) {
-      tts[i].remove();
+    if(tts[0]) {
+      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++) {