Merge pull request #284 from plasma-umass/fix-282-tooltip-cutoff-followup

Flip tooltip below point using its real rendered height (#282 follow-up)

Author: emeryberger

viewer/js/profile.js

@@ -1302,28 +1302,47 @@ class Profile {
               '<strong>Progress Speedup:</strong> ' + percentFormat(d.progress_speedup);
       });
 
-    // Choose a tooltip direction from the point's actual screen position so it
-    // is never clipped by the top edge of the viewport (see issue #282). The
-    // static .direction() callback only sees the datum, so we compute it here
-    // in the mouseover handler where `this` is the hovered circle.
-    let tip_direction = function (node: Element, d: any) {
-      let rect = node.getBoundingClientRect();
-      // Roughly the height of the 3-line tooltip plus padding/arrow.
-      let tip_margin = 80;
-      if (rect.top < tip_margin) {
-        // Near the top: drop the tooltip below the point instead of above.
-        return 's';
-      } else if (d.speedup > 0.8) {
-        // Near the right edge: place the tooltip to the left.
-        return 'w';
-      }
+    // Choose a tooltip direction from the point's position so it is not clipped
+    // by the edges of the viewport (see issue #282). The static .direction()
+    // callback only sees the datum, so we compute it in the mouseover handler
+    // where `this` is the hovered circle. This is only an initial guess; after
+    // the tooltip is rendered we measure its real box and flip it if it still
+    // overflows the top (see show_tip below), which avoids guessing its height.
+    let tip_direction = function (d: any) {
+      // Near the right edge: place the tooltip to the left so it isn't clipped.
+      if (d.speedup > 0.8) return 'w';
       return 'n';
     };
     let tip_offset = function (dir: string) {
       if (dir === 's') return [5, 0];
       if (dir === 'w') return [0, -5];
       return [-5, 0];
     };
+    // The currently-visible tip node (d3-tip appends one div per tip instance;
+    // pick the one that is actually shown rather than any stale leftovers).
+    let active_tip_node = function (): HTMLElement | null {
+      let nodes = document.querySelectorAll('.d3-tip');
+      for (let i = nodes.length - 1; i >= 0; i--) {
+        let el = nodes[i] as HTMLElement;
+        if (el.style.opacity === '1') return el;
+      }
+      return null;
+    };
+    // Show the tooltip, then correct for any remaining top-edge clipping by
+    // measuring the rendered tooltip (its real height) and flipping it below
+    // the point when the 'north' placement overflows the top of the viewport.
+    let show_tip = function (d: any, target: Element) {
+      let dir = tip_direction(d);
+      tip.direction(dir).offset(tip_offset(dir));
+      tip.show(d, target);
+      if (dir === 'n') {
+        let node = active_tip_node();
+        if (node && node.getBoundingClientRect().top < 0) {
+          tip.direction('s').offset(tip_offset('s'));
+          tip.show(d, target);
+        }
+      }
+    };
 
     /****** Add or update divs to hold each plot ******/
     let plot_div_sel = container.selectAll('div.plot')
@@ -1715,9 +1734,7 @@ class Profile {
               .attr('cy', function(d) { return yscale(d.progress_speedup); })
               .on('mouseover', function(d) {
                 d3.select(this).classed('highlight', true);
-                let dir = tip_direction(this, d);
-                tip.direction(dir).offset(tip_offset(dir));
-                tip.show(d, this);
+                show_tip(d, this);
               })
               .on('mouseout', function() {
                 d3.select(this).classed('highlight', false);