52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
( function() {
|
|
'use strict';
|
|
|
|
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);
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4) {
|
|
if(this.status == 200) {
|
|
tt.innerHTML = this.responseText;
|
|
tt.classList.add('visible');
|
|
}
|
|
}
|
|
};
|
|
xmlhttp.open("GET", url, true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
var destroyToolTip = function(ev) {
|
|
var tts = document.getElementsByTagName('tooltip');
|
|
if(tts[0]) {
|
|
tts[0].classList.remove('visible');
|
|
setTimeout(function() {
|
|
if(tts[0]) tts[0].remove();
|
|
},500);
|
|
}
|
|
}
|
|
|
|
//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
|