From 09d263facedaf4f431294a68fb1caee9826e32bb Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Fri, 29 Jun 2018 20:30:50 +0200
Subject: [PATCH] added example of dynamically generated tooltip on
 admin-demo-page

---
 templates/adminTest.hamlet          |  2 +-
 templates/standalone/tooltip.julius | 29 ++++++++++++++++++++++++++++-
 templates/standalone/tooltip.lucius |  1 +
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/templates/adminTest.hamlet b/templates/adminTest.hamlet
index f3a48a134..04ea7cc05 100644
--- a/templates/adminTest.hamlet
+++ b/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.
 
diff --git a/templates/standalone/tooltip.julius b/templates/standalone/tooltip.julius
index e5c33026b..7161b3cf2 100644
--- a/templates/standalone/tooltip.julius
+++ b/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);
diff --git a/templates/standalone/tooltip.lucius b/templates/standalone/tooltip.lucius
index f3df41d12..feaae0b77 100644
--- a/templates/standalone/tooltip.lucius
+++ b/templates/standalone/tooltip.lucius
@@ -1,5 +1,6 @@
 .js-tooltip {
   position: relative;
+  display: inline-block;
 
   .tooltip__handle {
     background-color: var(--color-dark);