diff --git a/itooltip.css b/itooltip.css new file mode 100644 index 0000000..8a8414b --- /dev/null +++ b/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; + +} \ No newline at end of file diff --git a/itooltip.js b/itooltip.js index 5f7362f..126778e 100644 --- a/itooltip.js +++ b/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