From 6a7a13a09c157af54ef4996b0740b38ba32d24aa Mon Sep 17 00:00:00 2001 From: troy Date: Sat, 12 Mar 2022 13:12:47 +0100 Subject: [PATCH] grundfunktion tooltip --- itooltip.css | 10 +++++++++ itooltip.js | 35 +++++++++++++++++++++-------- itooltip.min.css | 1 + itooltip.min.js | 2 ++ itooltip.min.js.map | 54 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 93 insertions(+), 9 deletions(-) create mode 100644 itooltip.css create mode 100644 itooltip.min.css create mode 100644 itooltip.min.js create mode 100644 itooltip.min.js.map 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