Resolve "corr 5: tooltip"

Closes #17 (closed)

scenarios/xslt/edxml2html/css/styles.css

@@ -157,12 +157,21 @@ hr.metamark-line.doubleLine {
     flex-direction: row;
 }
 
-.unit-container > *:first-child {
+/*.unit-container > *:first-child {
     width: 10%;
-}
+}*/
 
 .unit-container > * {
-    width: 45%;
+    width: 40%;
+}
+
+.section-tab + .section-tab {
+  border-left: solid 1px var(--sub-blue-light);
+  padding-left: 5px;
+}
+
+.section-tab.notes {
+    width: 20%;
 }
 
 /*----------------------------------{ UNIT }--------------------------------*/
@@ -283,6 +292,32 @@ hr.metamark-line.doubleLine {
     color: var(--sub-blue);
 }
 
+/*----- Kommentare als tooltip -----*/
+
+.note {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.note .notetext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+
+  /* Position the note */
+  position: absolute;
+  z-index: 1;
+}
+
+.note:hover .notetext {
+  visibility: visible;
+}
+
 /*----------------------------------{ ITEMS: WORDS }--------------------------------*/
 
 .item.w:hover {