diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js index 98a737f17..a54d8b25d 100644 --- a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js +++ b/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); } diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js index df681d61e..a6f151c54 100644 --- a/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js +++ b/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; + } + }); } }