1256e2de30fbb9edd29e824471519cda5c016ffe
hiram
  Tue Jan 26 11:23:25 2021 -0800
try placing the message box at the bottom of the track when it is scrolled off the top refs #21980

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index e979d4a..98b32bd 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -4620,30 +4620,31 @@
     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
     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);
     // 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
@@ -4653,36 +4654,42 @@
     }
     // 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
     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;
+      $('#mouseOverText').css('top',bottomMsg + "px");
+    } else {
       $('#mouseOverText').css('top',tdTop + "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()
     {