diff --git a/README.md b/README.md
index aedf12d..c33a6e9 100644
--- a/README.md
+++ b/README.md
@@ -260,5 +260,28 @@ einfach ans ende der seite, rest macht das script
## js error sammler
in den header, am besten vor allen anderen js
```
-
+
+```
+
+## Fader
+```
+
+
+
...
+```
+
+zum ein und ausfaden einfach die class "visible" hinzufügen oder entfernen
+
+## Ajax ToolTip
+benötigt "Fader"
+
+```
+
+...
+
+blub
+
+...
+
+
```
\ No newline at end of file
diff --git a/fade.css b/fade.css
new file mode 100644
index 0000000..75ab3b7
--- /dev/null
+++ b/fade.css
@@ -0,0 +1,10 @@
+.fadeable {
+ opacity: 0;
+ margin-top: -30px;
+ transition: margin-top 0.2s,opacity 0.2s;
+}
+
+.fadeable.visible {
+ opacity: 1;
+ margin-top: 0;
+}
\ No newline at end of file
diff --git a/fade.min.css b/fade.min.css
new file mode 100644
index 0000000..371654c
--- /dev/null
+++ b/fade.min.css
@@ -0,0 +1 @@
+.fadeable{opacity:0;margin-top:-30px;transition:margin-top .2s,opacity .2s}.fadeable.visible{opacity:1;margin-top:0}
\ No newline at end of file
diff --git a/itooltip.css b/itooltip.css
new file mode 100644
index 0000000..e0e52f8
--- /dev/null
+++ b/itooltip.css
@@ -0,0 +1,15 @@
+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;
+
+}
+
+tooltip h3 {
+ margin: 0;
+ color: #fff;
+}
\ No newline at end of file
diff --git a/itooltip.js b/itooltip.js
new file mode 100644
index 0000000..5bf89a2
--- /dev/null
+++ b/itooltip.js
@@ -0,0 +1,52 @@
+( 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