better tooltips

app/templates/corpora/analyse_corpus.html.j2

@@ -6,6 +6,28 @@
     background-color: #9e9e9e;
     cursor: pointer;
   }
+  .material-tooltip {
+      padding: 5px 20px 20px;
+      border-radius: 10px;
+      background: rgba(37, 36, 36);
+      overflow: visible;
+  }
+
+  .material-tooltip .backdrop {
+      display: none !important;
+  }
+  .material-tooltip:after {
+    position: absolute;
+    content: "";
+    top: 100%;
+    left: 50%;
+    margin-left: -8px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 15px 13px 0 13px;
+    border-color: rgba(37, 36, 36) transparent transparent transparent;
+}
 </style>
 
 <div class="col s12 m3 sticky">
@@ -239,15 +261,29 @@
 
   function addToolTipToTokenElement(tokenElement, token) {
     M.Tooltip.init(tokenElement,
-                   {"html": `<p>Token information</p>
-                             <p class="left-align">
-                               word: ${token["word"]}<br>
-                               lemma: ${token["lemma"]}<br>
-                               pos: ${token["pos"]}<br>
-                               simple_pos: ${token["simple_pos"]}<br>
-                               text: ${result["text_loopup"][token["text_id"]]["title"]}
-                             </p>`,
-                   "position": "top"});
+                   {"html": `<table>
+                               <tr>
+                                 <th>Token information</th>
+                                 <th>Source information</th>
+                               </tr>
+                               <tr>
+                                 <td class="left-align">
+                                   word: ${token["word"]}<br>
+                                   lemma: ${token["lemma"]}<br>
+                                   pos: ${token["pos"]}<br>
+                                   simple_pos: ${token["simple_pos"]}
+                                 </td>
+                                 <td class="left-align">
+                                   Title: ${result["text_loopup"][token["text_id"]]["title"]}<br>
+                                   Author: ${result["text_loopup"][token["text_id"]]["title"]}<br>
+                                   Publishing year: ${result["text_loopup"][token["text_id"]]["publishing_year"]}
+                                 </td>
+                               </tr>
+                             </table>`,
+                   "inDuration": 2500,
+                   "margin": 15,
+                   "position": "top",
+                   "transitionMovement": 0});
   }
 </script>
 {% endblock %}