Added HTML tooltip with phonetics for Ňyqy

css/dark.css

@@ -15,7 +15,7 @@
   along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-html {
+html, thead tr, .tooltiptext {
     background-color: #34495e;
 }
 
@@ -36,11 +36,11 @@ table {
     border: 2px solid #263646;
 }
 
-thead tr {
-    background-color: #34495e;
-}
-
 #content,
 #postamble{
     background-color: #2c3e50;
 }
+
+.tooltiptext::after {
+    border-color: #34495e transparent transparent transparent;
+}

css/light.css

@@ -15,7 +15,9 @@
   along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-html {
+html,
+#content,
+#postamble {
     background-color: #eee;
 }
 
@@ -35,11 +37,11 @@ table {
     border: 2px solid #444;
 }
 
-thead tr {
+thead tr,
+.tooltiptext {
     background-color: #ddd;
 }
 
-#content,
-#postamble {
-    background-color: #eee;
+.tooltiptext::after {
+    border-color: #ddd transparent transparent transparent;
 }

css/nyqy.css

@@ -0,0 +1,49 @@
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted #1e5b50;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+
+    /* Fade in tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+.tooltiptext {
+    padding: 7px !important;
+}
+
+.largetable {
+    padding-top: 40px !important;
+    padding-bottom: 40px !important;
+}