grundfunktion tooltip
This commit is contained in:
troy
parent
81c619228b
commit
6a7a13a09c
10
itooltip.css
Normal file
10
itooltip.css
Normal file
@ -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;
|
||||
|
||||
}
|
||||
35
itooltip.js
35
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<tts.length;i++) {
|
||||
tts[i].remove();
|
||||
}
|
||||
}
|
||||
|
||||
var fadeIn = function(el) {
|
||||
@ -32,7 +46,10 @@
|
||||
var elems = document.getElementsByClassName('itooltip');
|
||||
for (var i =0;i<elems.length;i++) {
|
||||
elems[i].addEventListener('mouseenter',function(ev){
|
||||
loadToolTip(ev.target);
|
||||
loadToolTip(ev);
|
||||
});
|
||||
elems[i].addEventListener('mouseleave',function(ev){
|
||||
destroyToolTip(ev);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
1
itooltip.min.css
vendored
Normal file
1
itooltip.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
tooltip{display:block;width:300px;background-color:rgba(0,0,0,.8);color:#fff;border:3px solid #fff;border-radius:.5em;padding:.5em}
|
||||
2
itooltip.min.js
vendored
Normal file
2
itooltip.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
!function(){"use strict";for(var buildToolTip=function(ev,content){var mouseX=ev.pageX,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)},loadToolTip=function(ev){if(ev.target.dataset.url){var url=ev.target.dataset.url;console.log("URL:",url);var xmlhttp=new XMLHttpRequest;xmlhttp.onreadystatechange=function(){4==this.readyState&&200==this.status&&(console.log("Ajax:",this.responseText),buildToolTip(ev,this.responseText))},xmlhttp.open("GET",url,!0),xmlhttp.send()}},destroyToolTip=function(ev){for(var tts=document.getElementsByTagName("tooltip"),i=0;i<tts.length;i++)tts[i].remove()},fadeIn=function(el){el.classList.remove("hidden")},elems=document.getElementsByClassName("itooltip"),i=0;i<elems.length;i++)elems[i].addEventListener("mouseenter",(function(ev){loadToolTip(ev)})),elems[i].addEventListener("mouseleave",(function(ev){destroyToolTip(ev)}))}();
|
||||
//# sourceMappingURL=itooltip.min.js.map
|
||||
54
itooltip.min.js.map
Normal file
54
itooltip.min.js.map
Normal file
@ -0,0 +1,54 @@
|
||||
{
|
||||
"version": 3,
|
||||
"sources": [
|
||||
"itooltip.js"
|
||||
],
|
||||
"names": [
|
||||
"buildToolTip",
|
||||
"ev",
|
||||
"content",
|
||||
"mouseX",
|
||||
"pageX",
|
||||
"mouseY",
|
||||
"pageY",
|
||||
"console",
|
||||
"log",
|
||||
"tt",
|
||||
"document",
|
||||
"createElement",
|
||||
"classList",
|
||||
"add",
|
||||
"style",
|
||||
"cssText",
|
||||
"tn",
|
||||
"createTextNode",
|
||||
"appendChild",
|
||||
"body",
|
||||
"loadToolTip",
|
||||
"target",
|
||||
"dataset",
|
||||
"url",
|
||||
"xmlhttp",
|
||||
"XMLHttpRequest",
|
||||
"onreadystatechange",
|
||||
"this",
|
||||
"readyState",
|
||||
"status",
|
||||
"responseText",
|
||||
"open",
|
||||
"send",
|
||||
"destroyToolTip",
|
||||
"tts",
|
||||
"getElementsByTagName",
|
||||
"i",
|
||||
"length",
|
||||
"remove",
|
||||
"fadeIn",
|
||||
"el",
|
||||
"elems",
|
||||
"getElementsByClassName",
|
||||
"addEventListener"
|
||||
],
|
||||
"mappings": "CAAA,WACE,aA6CA,IA3CA,IAAIA,aAAe,SAASC,GAAGC,SAG7B,IAAIC,OAASF,GAAGG,MACZC,OAASJ,GAAGK,MAChBC,QAAQC,IAAIL,OAAOE,QACnB,IAAII,GAAKC,SAASC,cAAc,WAChCF,GAAGG,UAAUC,IAAI,UACjBJ,GAAGK,MAAMC,QAAS,4BAA4Bd,GAAGK,MAAM,IAAI,aAAcL,GAAGG,MAAO,MACnF,IAAIY,GAAKN,SAASO,eAAef,SACjCO,GAAGS,YAAYF,IACfN,SAASS,KAAKD,YAAYT,KAGxBW,YAAc,SAASnB,IACzB,GAAIA,GAAGoB,OAAOC,QAAQC,IAAtB,CACA,IAAIA,IAAMtB,GAAGoB,OAAOC,QAAQC,IAC5BhB,QAAQC,IAAI,OAAOe,KACnB,IAAIC,QAAU,IAAIC,eAClBD,QAAQE,mBAAqB,WACJ,GAAnBC,KAAKC,YAAkC,KAAfD,KAAKE,SAC/BtB,QAAQC,IAAI,QAAQmB,KAAKG,cACzB9B,aAAaC,GAAG0B,KAAKG,gBAGzBN,QAAQO,KAAK,MAAOR,KAAK,GACzBC,QAAQQ,SAGNC,eAAiB,SAAShC,IAE5B,IADA,IAAIiC,IAAMxB,SAASyB,qBAAqB,WAC/BC,EAAG,EAAEA,EAAEF,IAAIG,OAAOD,IACzBF,IAAIE,GAAGE,UAIPC,OAAS,SAASC,IAEpBA,GAAG5B,UAAU0B,OAAO,WAIlBG,MAAQ/B,SAASgC,uBAAuB,YACnCN,EAAG,EAAEA,EAAEK,MAAMJ,OAAOD,IAC3BK,MAAML,GAAGO,iBAAiB,cAAa,SAAS1C,IAC9CmB,YAAYnB,OAEdwC,MAAML,GAAGO,iBAAiB,cAAa,SAAS1C,IAC9CgC,eAAehC,OAnDrB",
|
||||
"file": "itooltip.js"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user