d4fdeadb1c734b4bf4d9885f462fa93c79df55b7
hiram
  Mon Feb 21 16:02:14 2022 -0800
add tooltip doc on column headers refs #28930

diff --git src/hg/htdocs/style/gar.css src/hg/htdocs/style/gar.css
index c5a8fbf..de1c6e3 100644
--- src/hg/htdocs/style/gar.css
+++ src/hg/htdocs/style/gar.css
@@ -54,30 +54,37 @@
   border-collapse: collapse;
   /* table-layout: fixed; */
   width: 100%;
 }
 
 /* the large table begins life as display none,
  *   onload will change it to 'table' -- saves time on Edge/Chrome */
 
 .cladeTable {
   table-layout: fixed;
   display: none;
   width: auto;
   margin: auto;
 }
 
+/* allow content in table header cells to overflow to allow tooltip
+ *  legend display outside the cell
+ */
+.cladeTable thead tr th {
+  overflow: visible;
+}
+
 .borderOne th,
 .borderOne td {
   border: 1px solid black;
   word-wrap: anywhere;
   /* overflow-wrap: anywhere; */
   overflow: hidden;
   height: 40px;
   /* overflow: hidden; */
 }
 
 .gak {
   display: table-row;
 }
 
 .gar {
@@ -485,15 +492,71 @@
   /* background-color: #00ff00; */
   background-color: #4f6c9f;
 }
 
 #specificRequest {
   color: #eeaa22;
   /* background: #555555;*/
   background: white;
 }
 
 #specificRequest:hover {
   /* color: #555555;*/
   color: white;
   background: #eeaa22;
 }
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  overflow: visible;
+}
+
+.cladeTable thead tr th:hover .tooltiptext {
+  visibility: visible;
+}
+
+.cladeTable thead tr th:hover .tooltiptextright {
+  visibility: visible;
+}
+
+.tooltip .tooltiptext {
+  border: 2px solid #000;
+  visibility: hidden;
+  overflow: visible;
+  position: absolute;
+  padding: 2px;
+  z-index: 5;
+  float: left;
+  margin: 0 auto;
+  height: auto;
+  width: 300px;
+  color: black;
+  left: -10px;
+  transform: translate(1px, -110%);
+  top: 0;
+  background: #ffffff;
+  color: #000000;
+}
+
+/* right most two columns have right margins instead of left so as
+ *  not to run off the page to the right
+ */
+
+.tooltip .tooltiptextright {
+  border: 2px solid #000;
+  visibility: hidden;
+  overflow: visible;
+  position: absolute;
+  padding: 2px;
+  z-index: 5;
+  float: right;
+  margin: 0 auto;
+  height: auto;
+  width: 300px;
+  color: black;
+  right: -10px;
+  transform: translate(1px, -110%);
+  top: 0;
+  background: #ffffff;
+  color: #000000;
+}