fix(legacy-preset-chart-nvd3): tooltip's disappearance and stickiness

This is a replication of PR #6898 in apache/incubator-superset
Nvd3 attaches tooltips to the body of the dom, not the chart the tooltip is meant fo. On hover, it sets their opacity to 1. In order to address both their stickiness when chart reloads (PR #6805) and thier disappearance on scroll in dashboards (PR #6852), we introduce a shouldRemove parameter to `hideTooltips` and only remove them befor chart reloads. For the scroll events triggered on dashboards, we only hide the tooltips by setting their opacity to 0. When they get hovered over again, nvd3 sets their opacity to 1 which causes them to reappear.

packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js

@@ -737,8 +737,9 @@ function nvd3Vis(element, props) {
         .attr('height', height)
         .call(chart);
 
-      // on scroll, hide tooltips. throttle to only 4x/second.
-      window.addEventListener('scroll', throttle(() => hideTooltips(element), 250));
+      // On scroll, hide (not remove) tooltips so they can reappear on hover.
+      // Throttle to only 4x/second.
+      window.addEventListener('scroll', throttle(() => hideTooltips(false), 250));
 
       // The below code should be run AFTER rendering because chart is updated in call()
       if (isTimeSeries && activeAnnotationLayers.length > 0) {
@@ -1001,10 +1002,10 @@ function nvd3Vis(element, props) {
     return chart;
   };
 
-  // hide tooltips before rendering chart, if the chart is being re-rendered sometimes
+  // Remove tooltips before rendering chart, if the chart is being re-rendered sometimes
   // there are left over tooltips in the dom,
   // this will clear them before rendering the chart again.
-  hideTooltips(element);
+  hideTooltips(true);
 
   nv.addGraph(drawGraph);
 }

packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js

@@ -176,12 +176,20 @@ export function generateBubbleTooltipContent({
   return s;
 }
 
-export function hideTooltips(element) {
-  if (element) {
-    const targets = element.querySelectorAll('.nvtooltip');
-    if (targets.length > 0) {
-      targets.forEach(t => t.remove());
-    }
+// shouldRemove indicates whether the nvtooltips should be removed from the DOM
+export function hideTooltips(shouldRemove) {
+  const targets = document.querySelectorAll('.nvtooltip');
+  if (targets.length > 0) {
+    // Only set opacity to 0 when hiding tooltips so they would reappear
+    // on hover, which sets the opacity to 1
+    targets.forEach(t => {
+      if (shouldRemove) {
+        t.remove();
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        t.style.opacity = 0;
+      }
+    });
   }
 }