447513356fcfa684846bdd1b63476e68d9c17ce9
chmalee
  Thu Apr 6 09:04:41 2023 -0700
Add code to create tooltips under our control. Convert title attributes
on hgTracks into these tooltips

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index e8c396c..ef25fe4 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -536,30 +536,31 @@
 .hintRow { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; }
 /* halfVis may need to be removed again, but I am hoping it works in DTD 4.01 transitional */
 .halfVis { opacity: 0.5; filters.alpha.opacity:50; }
 
 /* waitMask allows waiting on long running javascript using utils.js::waitOnFunction */
 .waitMask { display: none; cursor: wait; z-index: 9999; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #fff; }
 .inOutButton { height: 24px; width: 24px; border-style: outset; } /* A [+][-] button can be toggled by waitOnFunction during long running scripts */
 
 /* imageV2 */
 div.dragZoom { cursor: text; }
 img.sliceImg { position:relative; border:0; z-index:10;} /* z-index allows highlight beneath img */
 div.sliceDiv { overflow:hidden; }
 div.highlightItem { opacity:0.7; border-style:none; position:absolute; overflow:hidden; }
 div.loading { position: absolute; opacity: 0.75; z-index: 15; 
               background: white url("/images/loading.gif") no-repeat center;   }
+#imgTbl map {position: relative; z-index:11}
 
 /* These are for imageV2 sideButtons: */
 .btn  { border-style: outset; background-color: #CCCCCC; border-color: #CCCCCC; } /* border-color: works for FF but screws up IE */
 .btnN { border-width: 1px 1px 1px 1px; margin: 1px 1px 0px 1px; } /* connect none */
 .btnU { border-width: 0px 1px 1px 1px; margin: 0px 1px 0px 1px; } /* connect up */
 .btnD { border-width: 1px 1px 0px 1px; margin: 1px 1px 0px 1px; } /* connect down */
 .btnL { border-width: 0px 1px 0px 1px; margin: 0px 1px 0px 1px; } /* connect linear */
 .btnBlue { background-color:#91B3E6; }
 .inset { border-style: inset; } /* Flatten button if not configurable */
 
 /* These are for dragReorder: both in imageV2 and in hgTrackUi subtrack list */
 .trDrag { background-color: #CCFFCC; }
 .dragHandle { cursor: n-resize; }
 
 /* in hgTracks imageV2, left label (and reverse rightLabel) now uses css for red line */
@@ -1122,17 +1123,32 @@
     padding: 5px;
     cursor: pointer;
 }
 
 .tbTooltiptext {
     visibility: hidden;
     font-style: italic;
     font-size: smaller;
     padding: 5px;
 }
 
 .tbTooltip:hover .tbTooltiptext {
     visibility: visible;
 }
 
+/* Tooltips - Note these are just general rules all the tooltips will have, the
+ * exact positioning is set by associated javascript in utils.js */
+.tooltip {
+    visibility: hidden;
+    background-color: #282828;
+    color: #CDCDCD;
+    text-align: center;
+    position: fixed;
+    z-index: 1003; /* these indices are all over the place for various things */
+    opacity: 0;
+    line-height: 1em;
+}
 
-
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 0.9;
+}