59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
( 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;";
|
|
var tn = document.createTextNode(content);
|
|
tt.appendChild(tn);
|
|
document.body.appendChild(tt);
|
|
}
|
|
|
|
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);
|
|
buildToolTip(ev,this.responseText);
|
|
}
|
|
};
|
|
xmlhttp.open("GET", url, true);
|
|
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) {
|
|
//TODO fancy fadein
|
|
el.classList.remove('hidden');
|
|
}
|
|
|
|
//class itooltip
|
|
var elems = document.getElementsByClassName('itooltip');
|
|
for (var i =0;i<elems.length;i++) {
|
|
elems[i].addEventListener('mouseenter',function(ev){
|
|
loadToolTip(ev);
|
|
});
|
|
elems[i].addEventListener('mouseleave',function(ev){
|
|
destroyToolTip(ev);
|
|
});
|
|
}
|
|
})();
|
|
|
|
//TODO lade daten von url in data-url
|
|
//TODO in der obenhälfte tooltip down untehälte up
|
|
//TODO linke hälte tooltip richts sondt links
|