Add tooltips

html/main.js

@@ -36,7 +36,6 @@ function drawPorts() {
     l.id="port" + (i+1);
     f.appendChild(d);
   }
-  console.log("DRAWING DONE ");
 }
 
 function update() {
@@ -92,6 +91,7 @@ function update() {
 	    tt.innerHTML += "RX-Power = " + (Number(p.sfp_rxpower) / 10.0).toFixed(0) + "mW<br>";
 	    console.log(tt.innerHTML);
 	  }
+	  iHTML += "</table>";
 	}
       }
     }

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;
+}