Skip to content

Commit

Permalink
fix(legacy-preset-chart-nvd3): tooltip's disappearance and stickiness (
Browse files Browse the repository at this point in the history
…#1)

fix: tooltip disappearance and stickiness
  • Loading branch information
xtinec authored and zhaoyongjie committed Nov 26, 2021
1 parent 53ab714 commit 0ecf719
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -190,12 +190,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;
}
});
}
}

Expand Down

0 comments on commit 0ecf719

Please sign in to comment.