iv-org/instances-api
1
0
Fork 0
mirror of https://github.com/iv-org/instances-api.git synced 2024-10-01 04:35:38 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #20 from hackerncoder/explainHealthTooltip

Browse Source 
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
1 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/instances/views/index.ecr
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>