Merge pull request #20 from hackerncoder/explainHealthTooltip

Add tooltip explaining health
This commit is contained in:
Perflyst 2021-01-22 16:28:01 +01:00 committed by GitHub
commit 4d3c2025cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -45,6 +45,43 @@
float: right; float: right;
text-align: 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> </style>
</head> </head>
@ -66,7 +103,9 @@
<th><a href="/?sort_by=<%= sort_by == "users" ? "users-reverse" : "users" %>">users</a></th> <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 == "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 == "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> </tr>
</thead> </thead>