feat(philology): display notes as tooltips

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 {

scenarios/xslt/edxml2html/libs/html-philology.lib.xsl

@@ -50,6 +50,9 @@
                     </a>
                 </div>-->
                 <xsl:apply-templates />
+                <xsl:if test="not(child::notes)">
+                    <div class="notes section-tab"/>
+                </xsl:if>
             </div>
         </div>
     </xsl:template>
@@ -172,6 +175,20 @@
         </span>
     </xsl:template>
     
+    <xsl:template match="philology//notes">
+        <div class="notes section-tab">
+            <xsl:apply-templates/>
+        </div>
+    </xsl:template>
+    
+    <xsl:template match="philology//note">
+        <span class="note">📌
+            <span class="notetext">
+                <xsl:apply-templates/>
+            </span>
+        </span>        
+    </xsl:template>
+    
     
     <!-- TABLE ITEMS -->
     <xsl:template match="node()" mode="table-items">