diff --git a/fade.css b/fade.css new file mode 100644 index 0000000..75ab3b7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/fade.min.css b/fade.min.css new file mode 100644 index 0000000..371654c --- /dev/null +++ b/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} \ No newline at end of file diff --git a/itooltip.js b/itooltip.js index ce1a256..5bf89a2 100644 --- a/itooltip.js +++ b/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