added example of dynamically generated tooltip on admin-demo-page

templates/adminTest.hamlet

@@ -1,7 +1,7 @@
 <div .container>
   <h1>Uniworky - Admin Demopage
 
-  <p>
+  <p data-tooltip="Solch ein Tooltip kann mit dem <em>data-tooltip</em> Attribut erzeugt werden. Funktioniert aber nur in Block-Elementen die einen sinnvollen Wrapper haben.">
     Diese interne Seite dient lediglich zum Testen diverser Funktionalitäten
     und zur Demonstration der verschiedenen Hilfsfunktionen/Module.
 

templates/standalone/tooltip.julius

@@ -24,12 +24,39 @@
         }
       }, 250);
     });
-  }
+  };
+
+  window.utils.tooltipFromAttribute = function(el) {
+    var tt = document.createElement('div');
+    var handle = document.createElement('div');
+    var content = document.createElement('div');
+
+    tt.classList.add('js-tooltip');
+    handle.classList.add('tooltip__handle');
+    content.classList.add('tooltip__content', 'hidden');
+
+    handle.innerText = '?';
+    content.innerHTML = el.getAttribute('data-tooltip');
+
+    tt.appendChild(handle);
+    tt.appendChild(content);
+
+    if (el.nextSiblingElement) {
+      el.parentElement.insertBefore(tt, el.nextSiblingElement);
+    } else {
+      el.parentElement.appendChild(tt);
+    }
+  };
 
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
 
+    // initialize tooltips set via `data-tooltip`
+    Array.from(document.querySelectorAll('[data-tooltip]')).forEach(function(el) {
+      window.utils.tooltipFromAttribute(el)
+    });
+
   // initialize tooltips
   Array.from(document.querySelectorAll('.js-tooltip')).forEach(function(tt) {
     window.utils.tooltip(tt);

templates/standalone/tooltip.lucius

@@ -1,5 +1,6 @@
 .js-tooltip {
   position: relative;
+  display: inline-block;
 
   .tooltip__handle {
     background-color: var(--color-dark);