add a tooltip design

assets/css/common/post-single.css

@@ -411,3 +411,59 @@ img.in-text {
   background: var(--openring-bg);
   width: 12rem;
 }
+
+/* Tooltip styling */
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 10px;
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+	left: 100%;
+	width: max-content;
+	max-width: 400px;
+	word-wrap: break-word;
+    opacity: 0;
+    transition: opacity 0.3s;
+    max-width: 300px; /* Limit the maximum width of the tooltip */
+    word-wrap: break-word; /* Break words if they exceed the max-width */
+	font-size: 14px;
+}
+
+.tooltip .tooltiplabel {
+	text-decoration: underline;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+.tooltip:active .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Adjust the tooltip for screens smaller than 600px */
+/* Show tooltip in the center when on mobile */k
+/* Reference: https://rimdev.io/css-only-tooltip-for-all-screen-sizes/ */
+@media screen and (max-width: 600px) {
+    .tooltip .tooltiptext {
+        max-width: 90%; /* Adjust this percentage based on your needs */
+		font-size: 12px;
+		position: fixed;
+		bottom: auto; 
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%);
+    }
+}

assets/css/core/theme-vars.css

@@ -16,6 +16,7 @@
     --code-bg: rgb(245, 245, 245);
     --border: rgb(238, 238, 238);
     --link-color: rgb(255, 0, 0);
+	--tooltip-hover-color: rgb(235, 239, 232);
     --openring-bg: rgb(238, 238, 238);
 }