Add tooltip to posterpage

app/templates/main/poster.html.j2

@@ -168,7 +168,7 @@
         <span class="chip">brown</span>&nbsp;|&nbsp;&nbsp;<span class="chip">fox</span>
         <span class="chip">jumps</span> <span class="chip">over</span>
         <span class="chip">the</span> <span class="chip">lazy</span>
-        <span class="chip">dog</span>&nbsp;|&nbsp;&nbsp;<span class="chip">.</span>
+        <span class="chip" id="tooltipped">dog</span>&nbsp;|&nbsp;&nbsp;<span class="chip">.</span>
       </p>
     </div>
   </div>
@@ -187,8 +187,49 @@
   <p>
     <blockquote>
       Umgesetzt mit <i>IMS Open Corpus Workbench</i><br>
-      als Docker Container mit Socketverbindung
+      als lokaler Docker-Container
     </blockquote>
   </p>
 </div>
+
+<div class="col s12">
+  <p>&nbsp;</p>
+  <p>&nbsp;</p>
+  <p>&nbsp;</p>
+  <p>&nbsp;</p>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    tooltippedElement = document.getElementById("tooltipped");
+    tooltip = M.Tooltip.init(
+      tooltippedElement,
+      {"html": `<table>
+                  <tr>
+                    <th>Token information</th>
+                    <th>Source information</th>
+                  </tr>
+                  <tr>
+                    <td class="left-align">
+                      Word: dog<br>
+                      Lemma: dog<br>
+                      POS: NN<br>
+                      Simple POS: NOUN<br>
+                      NER: NULL
+                    </td>
+                    <td class="left-align">
+                      Title: Current Notes<br>
+                      Author: Unknown<br>
+                      Publishing year: 1885
+                    </td>
+                  </tr>
+                </table>`,
+       "inDuration": 1500,
+       "margin": 15,
+       "position": "bottom",
+       "transitionMovement": 0}
+    );
+    tooltip.open();
+  });
+</script>
 {% endblock %}