Add tooltips

html/style.css

@@ -26,7 +26,7 @@ li a:hover {
 }
 
 table, th, td {
-  border: 1px solid navy;
+  border: 1px solid #226;
   padding: 8px;
 }
 table {
@@ -84,7 +84,6 @@ object {
 .row {display: flex;}
 .rcol {flex: 90%;}
 .lcol {flex: 10%;}
-span::before{ content:''; position: absolute; top: 40px; left:0; width: 100%; height: 2px; background: #aaf;}
 
 /* Login page */
 .login_page {margin: 0; padding: 0; background: #aaf; height: 100vh; overflow: hidden;}
@@ -118,3 +117,46 @@ margin: 30px 0;
 .txt_field span::before{ content:''; position: absolute; top: 40px; left:0; width: 100%; height: 2px; background: #aaf;}
 .txt_field input:focus ~ label,
 .txt_field input:valid ~ label { top: -5px; color: #aaf; }
+
+.tooltip {
+  position: relative; display: inline-block; cursor: pointer;
+}
+
+
+.tooltiptext {
+  visibility: hidden;
+  width: 260px;
+  background-color: #226;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  top: 80%;
+  left: 50%;
+  margin-left: -130px;
+}
+
+.tooltiptext::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+.tt_table {
+  width: 100%; font-size:90%;
+}
+.tt_table td {
+  text-align: left;
+}