Introduce custom Jekyll tags for better glossary integration

css/custom-jekyll/tags.css

@@ -0,0 +1,56 @@
+.no-underline {
+  text-decoration: none !important;
+}
+
+.hide {
+  display: none !important;
+}
+
+/* Tooltip container */
+.glossary-tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+    color: black;
+    text-decoration: none !important;
+}
+
+/* Tooltip text */
+.glossary-tooltip .tooltip-text {
+    visibility: hidden;
+    width: 300px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    padding: 5px 8px;
+    border-radius: 6px;
+
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -150px;
+
+    /* Fade in tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+/* Tooltip arrow */
+.glossary-tooltip .tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.glossary-tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}

css/glossary.css

@@ -2,14 +2,6 @@
   display: inline;
 }
 
-.no-underline {
-  text-decoration: none !important;
-}
-
-.hide {
-  display: none !important;
-}
-
 .permalink {
   background-image: url(../images/link.png);
   background-repeat: no-repeat;