82a65b272b0d71896100ce9e8613abb07b781f25
hiram
  Wed Jan 27 12:19:46 2021 -0800
no need to switch to bottom of track, just pin at the top of the window refs #21980

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 3c98253..e89f7fc 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -4623,87 +4623,78 @@
     //     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
     var tdWidth = Math.floor(tdRect.width);
     var tdHeight = Math.floor(tdRect.height);
-    var rightSide = tdLeft + tdWidth;
+    var tdRight = 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);
+       graphOffset = Math.max(0, tdRight - 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
     var mouseOverValue = mouseOver.noDataString;
     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 msgTop = Math.max(0, tdTop);
+    var lineTop = Math.max(0, msgTop + msgHeight);
     var lineLeft = Math.max(0, clientX - 3);  // with magic 3
-    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
+    if (clientY < msgTop + msgHeight) {	// cursor overlaps with the msg box
       msgLeft = clientX - msgWidth - 6;     // to the left of the cursor
-        if (msgLeft < tdLeft) {   // hits left edge, switch
+      if (msgLeft < tdLeft || msgLeft < 0) {   // hits left edge, switch
         msgLeft = clientX;         // to right of cursor
       }
+    } else {	// apply limits to left and right edges, window or image
+      msgLeft = Math.min(msgLeft, tdRight - msgWidth);  // image right limit
+      msgLeft = Math.min(msgLeft, $(window).width() - msgWidth); // window right
+      msgLeft = Math.max(0, msgLeft);  // left window edge limit
     }
-      $('#mouseOverText').css('top',bottomMsg + "px");
-    } else {
-      $('#mouseOverText').css('top',tdTop + "px");
-    }
+    $('#mouseOverText').css('top',msgTop + "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()