Add better tooltip

public/index.css

@@ -28,10 +28,9 @@
 
 
 .serviceStatusText {
-    max-width: 60%;
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
+    overflow: hidden;
 }
 
 .serviceName {
@@ -48,6 +47,37 @@
     color: rgb(77, 0, 0);
 }
 
+.tooltip {
+    position: relative;
+    display: inline-block;
+    max-width: 60%;
+}
+
+.tooltip .tooltipText {
+    visibility: hidden;
+    width: min-content;
+    background-color: #000;
+    color: #cccccc;
+    text-align: center;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    position: absolute;
+    bottom: 125%;
+    left: 50%;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+
+.tooltip:hover .tooltipText {
+    visibility: visible;
+    opacity: 1;
+}
+
+
+
+
+
 body {
     font-family: DejaVu Sans Mono, Noto Sans Mono, Hack, monospace;
     width: min(720px, 90%);
@@ -55,21 +85,26 @@ body {
     margin-right: auto;
     text-align: center;
 }
-  
+
 
 @media (prefers-color-scheme: dark) {
     body {
-      background-color: #111111;
-      color: #cccccc;
+        background-color: #111111;
+        color: #cccccc;
     }
-    
+
     .serviceUp {
         background-color: rgba(31, 164, 93, 0.2);
         color: rgb(192, 230, 210);
     }
-    
+
     .serviceDown {
         background-color: rgba(255, 0, 0, 0.2);
         color: rgb(255, 214, 214);
     }
-}  
+
+    .tooltip .tooltipText {
+        background-color: #cccccc;
+        color: #000;
+    }
+}

templates/index.html

@@ -20,9 +20,12 @@
                     <a class="serviceName" href="{{Url}}">{{Name}}</a>
                     <span>- {{#Ok}}UP{{/Ok}}{{^Ok}}DOWN{{/Ok}}</span>
                 </div>
-                <div class="serviceStatusText" title="{{Status}}">
-                  <span>[{{Type}}]</span>
-                  <span>{{Status}}</span>
+                <div class="tooltip">
+                  <div class="serviceStatusText">
+                    <span>[{{Type}}]</span>
+                    <span>{{Status}}</span>
+                  </div>
+                  <span class="tooltipText">{{Status}}</span>
                 </div>
             </div>
         </li>