From 7cb0e127922c379cc943f41a5cf398fe006145cf Mon Sep 17 00:00:00 2001
From: HackerNCoder <hackerncoder@protonmail.ch>
Date: Thu, 7 Jan 2021 23:39:51 +0000
Subject: [PATCH] Add tooltip explaining health

---
 src/instances/views/index.ecr | 40 ++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/instances/views/index.ecr b/src/instances/views/index.ecr
index 9e0f062..836bdea 100644
--- a/src/instances/views/index.ecr
+++ b/src/instances/views/index.ecr
@@ -45,6 +45,43 @@
         float: right;
         text-align: right;
       }
+      
+      .tooltip {
+        position: relative;
+        display: inline-block;
+        <!--border-bottom: 1px dotted black;-->
+      }
+      .tooltip .tooltiptext {
+        visibility: hidden;
+        width: 175px;
+        background-color: #555;
+        color: #fff;
+        text-align: center;
+        border-radius: 6px;
+        padding: 5px 0;
+        position: absolute;
+        z-index: 1;
+        bottom: 125%;
+        left: 0%;
+        margin-left: -60px;
+        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;
+        border-color: #555 transparent transparent transparent;
+      }
+      .tooltip:hover .tooltiptext {
+        visibility: visible;
+        opacity: 1;
+      }
     </style>
   </head>
 
@@ -66,7 +103,8 @@
             <th><a href="/?sort_by=<%= sort_by == "users" ? "users-reverse" : "users" %>">users</a></th>
             <th><a href="/?sort_by=<%= sort_by == "signup" ? "signup-reverse" : "signup" %>">signup</a></th>
             <th><a href="/?sort_by=<%= sort_by == "location" ? "location-reverse" : "location" %>">location</a></th>
-            <th><a href="/?sort_by=<%= sort_by == "health" ? "health-reverse" : "health" %>">health</a></th>
+            <th><a href="/?sort_by=<%= sort_by == "health" ? "health-reverse" : "health" %>">
+              <div class="tooltip">health<span class="tooltiptext">Uptime / Downtime displayed in percentage.</span></div></a></th>
           </tr>
         </thead>