[tooltips-closest demo] fix tooltip visibility on plot (re)entry. cli…

…p interpolated markers to plot region.
leeoniya · Aug 24, 2020 · 0c9dbc3 · 0c9dbc3
1 parent c1c09a0
commit 0c9dbc3
Showing 1 changed file with 27 additions and 6 deletions.
diff --git 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();