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();