[dashboard] fix nvd3 tooltips (#2096)

* hide tooltips on scroll

* hide tooltips on render/re-render of the chart

* move function above vis function, fixes linter

superset/assets/package.json

@@ -58,6 +58,7 @@
     "immutable": "^3.8.1",
     "jquery": "^2.2.1",
     "jquery-ui": "1.10.5",
+    "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^0.26.0",
     "moment": "^2.14.1",
     "moments": "0.0.2",

superset/assets/stylesheets/superset.css

@@ -114,6 +114,12 @@ span.title-block {
 .nvtooltip {
     //position: relative !important;
     z-index: 888;
+    transition: opacity 0ms linear;
+    -moz-transition: opacity 0ms linear;
+    -webkit-transition: opacity 0ms linear;
+    transition-delay: 0ms;
+    -moz-transition-delay: 0ms;
+    -webkit-transition-delay: 0ms;
 }
 .nvtooltip table td{
     font-size: 11px !important;

superset/assets/visualizations/nvd3_vis.js

@@ -3,6 +3,7 @@ import $ from 'jquery';
 import { category21 } from '../javascripts/modules/colors';
 import { timeFormatFactory, formatDate } from '../javascripts/modules/dates';
 import { customizeToolTip } from '../javascripts/modules/utils';
+import throttle from 'lodash.throttle';
 
 const d3 = require('d3');
 const nv = require('nvd3');
@@ -58,6 +59,10 @@ const addTotalBarValues = function (chart, data, stacked) {
     });
 };
 
+function hideTooltips() {
+  $('.nvtooltip').css({ opacity: 0 });
+}
+
 function nvd3Vis(slice, payload) {
   let chart;
   let colorKey = 'key';
@@ -402,9 +407,17 @@ function nvd3Vis(slice, payload) {
       .call(chart);
     }
 
+    // on scroll, hide tooltips. throttle to only 4x/second.
+    $(window).scroll(throttle(hideTooltips, 250));
+
     return chart;
   };
 
+  // hide 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();
+
   const graph = drawGraph();
   nv.addGraph(graph);
 }