4178628e88ad4af932683334ef34430a7bfbef3d
hiram
  Tue Jan 26 21:09:05 2021 -0800
avoid cursor covering popUp message box refs #21980

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 5addd5d..3c98253 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -4620,36 +4620,37 @@
     if (trackName.length < 1) { return; }	// verify valid trackName
 
     // location of mouse relative to the whole page
     //     even when the top of page has scolled off
     var evtX = Math.floor(evt.pageX);
 //  var evtY = Math.floor(evt.pageY);
 //  var offX = Math.floor(evt.offsetX);       // no need for evtY or offX
 
     // find location of this <td> slice in the image, this is the track
     //   image in the graphic, including left margin and center label
     //   This location follows the window scrolling, could go negative
     var tdId  = document.getElementById(evt.currentTarget.id);
     var tdRect = tdId.getBoundingClientRect();
     var tdLeft = Math.floor(tdRect.left);
     var tdTop = Math.floor(tdRect.top);
-    if (tdTop < 0) { return; }  // track is scrolled off top of screen
+//    if (tdTop < 0) { return; }  // track is scrolled off top of screen
     var tdWidth = Math.floor(tdRect.width);
     var tdHeight = Math.floor(tdRect.height);
     var rightSide = tdLeft + tdWidth;
     // clientX is the X coordinate of the mouse hot spot
     var clientX = Math.floor(evt.clientX);
+    var clientY = Math.floor(evt.clientY);
     // the graphOffset is the index (x coordinate) into the 'items' definitions
     //  of the data value boxes for the graph.  The magic number three
     //   is used elsewhere in this code, note the comment on the constant
     //   LEFTADD.
     var graphOffset = Math.max(0, clientX - tdLeft - 3);
     if (hgTracks.revCmplDisp) {
        graphOffset = Math.max(0, rightSide - clientX);
     }
 
     var windowUp = false;     // see if window is supposed to become visible
     var foundIdx = -1;
     if (mouseOver.items[trackName]) {
        foundIdx = mouseOver.findRange(graphOffset, mouseOver.items[trackName]);
     }
     // can show 'no data' when not found
@@ -4657,39 +4658,53 @@
     if (foundIdx > -1) { // value to display
       if (mouseOver.items[trackName][foundIdx].c > 1) {
         mouseOverValue = "&nbsp;~&nbsp;" + mouseOver.items[trackName][foundIdx].v + "&nbsp;";
       } else {
         mouseOverValue = "&nbsp;" + mouseOver.items[trackName][foundIdx].v + "&nbsp;";
       }
     }
     $('#mouseOverText').html(mouseOverValue);
     var msgWidth = mouseOver.maximumWidth[trackName];
     $('#mouseOverText').width(msgWidth);
     var msgHeight = Math.ceil($('#mouseOverText').height());
     var lineHeight = Math.max(0, tdHeight - msgHeight);
     if (tdTop < 0) { lineHeight = Math.max(0, tdHeight + tdTop - msgHeight); }
     var lineTop = Math.max(0, tdTop + msgHeight);
     var msgLeft = Math.max(tdLeft, clientX - (msgWidth/2) - 3); // with magic 3
+    if (clientY < tdTop + msgHeight) {
+      msgLeft = clientX - msgWidth - 6;     // to the left of the cursor
+      if (msgLeft < tdLeft) {   // hits left edge, switch
+        msgLeft = clientX;         // to right of cursor
+      }
+    } else {
       msgLeft = Math.min(msgLeft, rightSide - msgWidth);  // right border limit
+    }
     var lineLeft = Math.max(0, clientX - 3);  // with magic 3
-    $('#mouseOverText').css('left',msgLeft + "px");
     if (tdTop < 0) {
       var bottomMsg = tdTop + tdHeight - msgHeight;
+      // there is no real way to get cursor height, assume size of msgHeight
+      if (clientY > (bottomMsg - msgHeight)) { // assume cursor size==msgHeight
+        msgLeft = clientX - msgWidth - 6;     // to the left of the cursor
+        if (msgLeft < tdLeft) {   // hits left edge, switch
+          msgLeft = clientX;         // to right of cursor
+        }
+      }
       $('#mouseOverText').css('top',bottomMsg + "px");
     } else {
       $('#mouseOverText').css('top',tdTop + "px");
     }
+    $('#mouseOverText').css('left',msgLeft + "px");
     $('#mouseOverVerticalLine').css('left',lineLeft + "px");
     $('#mouseOverVerticalLine').css('top',lineTop + "px");
     $('#mouseOverVerticalLine').css('height',lineHeight + "px");
     windowUp = true;      // yes, window is to become visible
 
     if (windowUp) {     // the window should become visible
       mouseOver.popUpVisible();
     } else {    // the window should disappear
       mouseOver.popUpDisappear();
     } //      window visible/not visible
     },  //      mouseInTrackImage function (evt)
 
     // timeout calls here upon completion
     delayCompleted: function()
     {