a425e0d7b7d3dd637125baae3735bf1e9044c09d
hiram
  Wed Aug 21 09:39:14 2024 -0700
correct tooltip class definitions for column headers tips refs #32596

diff --git src/hg/htdocs/style/assemblySearch.css src/hg/htdocs/style/assemblySearch.css
index 1073c81..b7e8f3b 100644
--- src/hg/htdocs/style/assemblySearch.css
+++ src/hg/htdocs/style/assemblySearch.css
@@ -151,15 +151,78 @@
     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;
 }
 
+/* allow content in table header cells to overflow to allow tooltip
+ *  legend display outside the cell
+ */
+.dataTable thead tr th {
+  overflow: visible;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  overflow: visible;
+}
+
+.dataTable thead tr th:hover .tooltiptext {
+  visibility: visible;
+}
+
+.dataTable 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;
+}
+