diff --git a/demos/tooltips-closest.html b/demos/tooltips-closest.html index de1f231d..2c9d8f5a 100644 --- a/demos/tooltips-closest.html +++ b/demos/tooltips-closest.html @@ -62,7 +62,25 @@ const fmtDate = uPlot.fmtDate("{M}/{D}/{YY} {h}:{mm}:{ss} {AA}"); + let tooltipVisible = false; + + function showTooltip() { + if (!tooltipVisible) { + tooltip.style.display = "block"; + tooltipVisible = true; + } + } + + function hideTooltip() { + if (tooltipVisible) { + tooltip.style.display = "none"; + tooltipVisible = false; + } + } + function setTooltip(u) { + showTooltip(); + let top = u.valToPos(u.data[seriesIdx][dataIdx], 'y'); let lft = u.valToPos(u.data[ 0][dataIdx], 'x'); @@ -108,11 +126,11 @@ u => { let c = u.cursor; - if (c.idx != dataIdx) { + if (dataIdx != c.idx) { dataIdx = c.idx; if (seriesIdx != null) - setTooltip(u, setTooltip); + setTooltip(u); } } ], @@ -122,11 +140,9 @@ seriesIdx = sidx; if (sidx == null) - tooltip.style.display = "none"; - else if (dataIdx != null) { - tooltip.style.display = "block"; + hideTooltip(); + else if (dataIdx != null) setTooltip(u); - } } } ], @@ -138,6 +154,11 @@ const interpolatedColorWithAlpha = "#fcb0f17a"; ctx.save(); + + let clip = new Path2D(); + clip.rect(left, top, width, height); + ctx.clip(clip); + ctx.strokeStyle = interpolatedColorWithAlpha; ctx.beginPath();