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
@@ -1,499 +1,562 @@
 html,
 body {
     background-color:#ffffff;
     width: 100%;
     height: 100%;
     margin: 0 auto;
 }
 
 #modalWrapper.overlay::before {
     content: " ";
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 100;
     top: 0;
     left: 0;
     background: #000;
     background: rgba(0,0,0,0.7);
 }
 
 #modalWindow {
     display: none;
     z-index: 200;
     position: fixed;
     left: 50%;
     top: 50%;
     width: 460px;
     height: 80%;
     overflow: auto;
     padding: 10px 20px;
     background: #fff;
     border: 5px solid #999;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
 
 #modalWrapper.overlay #modalWindow {
     display: block;
 }
 
 /* padding: top right bottom left */
 
 .hideShowButton {
   text-align: left;
   background-color: #6688aa;
   color: #ffff00;
 }
 
 /* CSS equivalent for border=1 in old style html
  *  declare a table as: <table class='borderOne'>
 */
 
 .borderOne {
   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 {
   display: table-row;
 }
 
 .colComName,
 .colGComName {
   display: table-cell;
   /* width: 90px; */
   width: 10em;
 }
 
 .colSciName,
 .colGSciName {
   display: table-cell;
   /* width: 110px; */
   width: 12em;
 }
 
 .colAsmId,
 .colGAsmId {
   display: table-cell;
   /* width: 240px; */
   width: 240px;
 }
 
 .colAsmSize,
 .colGAsmSize {
   display: none;
   /* width: 90px; */
   width: 10em;
 }
 
 .colAsmSeqCount,
 .colGAsmSeqCount {
   display: none;
   /* width: 60px; */
   width: 8em;
 }
 
 .colScafN50,
 .colGScafN50 {
   display: none;
   /* width: 90px; */
   width: 10em;
 }
 
 .colContigN50,
 .colGContigN50 {
   display: none;
   /* width: 90px; */
   width: 10em;
 }
 
 .colIUCN,
 .colGIUCN {
   display: none;
   /* width: 28px; */
   width: 4em;
 }
 
 .colTaxId,
 .colGTaxId {
   display: none;
   /* width: 56px; */
   width: 7em;
 }
 
 .colAsmDate,
 .colGAsmDate {
   display: none;
   /* width: 66px; */
   width: 8em;
 }
 
 .colSubmitter,
 .colGSubmitter {
   display: none;
   /* width: 90px; */
   width: 11em;
 }
 
 .colClade,
 .colGClade {
   display: none;
   /* width: 60px; */
   width: 8em;
 }
 
 /* a box for row count visible/hidden statistics */
 
 .rowCount {
   position: relative;
   display: inline-block;
   float: right;
   color: #ffff00;
   background-color: #7799bb;
   border: 1px solid #000000;
   margin: 2px 20px 2px 2px;
   padding: 5px 5px 5px 5px;
 }
 
 /* trying to get a legend box to pop up */
 
 /* the background color here is the background for this legend text box */
 
 .legendMenu {
   position: relative;
   display: inline-block;
   float: right;
   color: white;
   background-color: #1d3a6e;
   border: 1px solid black;
   margin: 2px 20px 2px 2px;
   padding: 5px 5px 5px 5px;
 }
 
 /* the color here is the text color in the legend text */
 .legendContent {
   display: none;
   /* border: 1px solid #000000; */
   border: none;
   position: absolute;
   padding: 0;
   z-index: 2;
   float: left;
   margin: 0;
   height: 20%;
   color: black;
   /* background-color: black; */
   /* margin-left: 0;*/
   top: -250px;
   /* left: -120%; */
   right: 0;
   /* right: 0;
   bottom: -10px; */
 }
 
 .legendContent ul {
   /* background-color: #4f6c9f; a lighter blue */
   background-color: white;
   /* list-style-type: none; */
   list-style-position: outside;
   background-image: none;
   overflow: hidden;
   margin-left: 0;
   padding: 10px;
   width: 600px;
   border: 3px solid black;
 }
 
 .legendContent ul li {
   list-style-position: outside;
   overflow: hidden;
   margin-top: 1px;
   display: block;
   text-align: left;
 }
 
 .legendMenu:hover .legendContent {
   display: block;
 }
 
 /* the color of the text in the menu items when *not* highlighted #112295 */
 /* the color here is the color of the text when it is *not* highlighted */
 .legendContent ul:hover > li:not(:hover) {
   color: #777777;
   background-color: white;
 }
 
 .legendContent:hover .pullDownMenuContent {
   display: block;
 }
 
 /* margin is: top right bottom left */
 /* padding is: top right bottom left */
 /* box-shadow: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp */
   /* min-width: 160px; */
 /*  box-shadow: 0px 2px 2px 2px rgba(0,0,0,0.2); */
 /*  padding: 5px 5px 5px 5px; */
 
 /* a drop down example from
  * https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text
  * the background-color here is the background of the ancher text box
  *  but it doesn't come through as exactly what is specified here ?
  */
 .pullDownMenu {
   position: relative;
   display: inline-block;
   float: right;
   color: white;
   background-color: #1d3a6e;
   border: 1px solid #000000;
   margin: 2px 20px 2px 2px;
   padding: 5px 5px 5px 5px;
   text-align: left;
 }
 
 .pullDownMenuContent {
   display: none;
   position: absolute;
   padding: 0;
   z-index: 1;
   margin: 0;
   width: 100%;
 }
 /* the background-color here is what is in between the menu items */
 /* but why is there space between the menu items ? */
 /* the padding here affects the spacing to the left of the menu items */
 /* but these are offset to the right from the anchor text above ? */
 /* the margin-left moves them closer to the left edge of the anchor */
 /* a color here doesn't appear to color anything */
 
 .pullDownMenuContent ul {
   /* color: #ff0000;*/
   background-color: white;
   list-style-type: none;
   background-image: none;
   margin-left: 0;
   padding: 0;
 }
 
 /* from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
  * Example: div span will match all <span> elements that are inside
  *  a <div> element.  This matches all 'li' inside the 'ul'
  * color ad background-colore here does nothing
  * the margin-top trick here sets the spacing between the li items
  */
 .pullDownMenuContent ul li {
   list-style-position: outside;
   overflow: hidden;
   margin-top: 1px;
   display: block;
 /*
   border:1px solit grey;
 */
 }
 
 /*
 .pullDownMenuContent ul li:first-child {
   margin-top: 8px;
 }
 */
 
 /* these next two rules with the 'opacity' trick, allow the menu items
  *   to show highlight on as item as the mouse hovers over that item
  * the color here is the text color in the menu items when highlighted
  * the background-color here is the background of the text items when they
  * are highlighted
  * from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
 ul > li will match all <li> elements that are nested directly
 inside a <ul> element.
 
  */
 .pullDownMenuContent ul > li {
   /* opacity: 1.0; */
   /* color: #1a2a98; */
   color: white;
   background-color: #457ddd;
 }
 
 /* this makes the entire item row clickable, including the trailing whitespace,
  * not just the text part of the label
  */
 .pullDownMenuContent label {
   display: block;
 }
 
 /* the color of the text in the menu items when *not* highlighted #112295 */
 /* the color here is the color of the text when it is *not* highlighted */
 .pullDownMenuContent ul:hover > li:not(:hover) {
   /* opacity: 0.7; */
   /* color: #457ddd; */
   color: #112295;
   background-color: white;
 }
 
 .pullDownMenu:hover .pullDownMenuContent {
   display: block;
 }
 
 /** previous version of pullDownColumn **/
 .pullDownColumn {
   position: relative;
   display: inline-block;
   float: right;
   color: #ffff00;
   background-color: #7799bb;
   border: 1px solid #000000;
   margin: 2px 20px 2px 2px;
   padding: 5px 5px 5px 5px;
 }
 
 .pullDownColumnContent {
   display: none;
   position: absolute;
   background-color: #7799bb;
   padding: 0;
   z-index: 1;
   margin: 0;
   width: 100%;
 }
 
 .pullDownColumnContent ul {
   color: #ffff00;
   background-color: #7799bb;
   list-style-type: none;
   background-image: none;
   margin: 0;
   padding: 1px;
 }
 
 .pullDownColumnContent ul li {
   list-style-position: outside;
   overflow: hidden;
 }
 
 .pullDownColumnContent ul > li {
   opacity: 1.0;
   color: #ffff00;
 }
 
 .pullDownColumnContent ul:hover > li:not(:hover) {
   opacity: 0.8;
   color: #ff8800;
 }
 
 .pullDownColumn:hover .pullDownColumnContent {
   display: block;
 }
 
 /* The pull-down check boxes for the columns hide/show
  * example from:
  *  https://stackoverflow.com/questions/19206919/how-to-create-checkbox-inside-dropdown
  */
 
 .columnCheckList {
   display: inline-block;
   float: right;
   padding: 5px 50px 5px 10px;
   position: relative;
 }
 
 .columnCheckList .anchor {
   position: relative;
   cursor: pointer;
   display: inline-block;
   padding: 5px 50px 5px 10px;
   border: 1px solid #ccc;
   color: #ffff00;
   background-color: #7799bb;
 }
 
 #assemblyTypeAnchor {
   text-align: right;
 }
 
 .columnCheckList .anchor:after {
   position: absolute;
   content: "";
   border-left: 2px solid black;
   border-top: 2px solid black;
   padding: 5px;
   right: 10px;
   top: 20%;
   -moz-transform: rotate(-135deg);
   -ms-transform: rotate(-135deg);
   -o-transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
 }
 
 .columnCheckList .anchor:active:after {
   right: 8px;
   top: 21%;
 }
 
 .columnCheckList ul.columnCheckBox {
   padding: 2px;
   display: none;
   margin: 0;
   border: 1px solid #ccc;
   border-top: none;
   position: absolute;
   left: 0; top: 100%;
   width: 100%;
 }
 
 .columnCheckList ul.columnCheckBox li {
   list-style: none;
 }
 
 .columnCheckList.visible .anchor {
   color: #0094ff;
   background-color: #7799bb;
 }
 
 .columnCheckList.visible .columnCheckBox {
   display: block;
 }
 
 #canNotFindDiv {
   color: white;
   /* 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;
+}