Update line-customTooltips.html (Re issue #4038 )

Add window scroll position to tooltip position calculation so they show up in the intended place instead of potentially off-screen! Moved tooltips inside the canvas parent container since they are being positioned in terms of its location
chartjs · Mar 22, 2017 · c96ad66 · c96ad66
1 parent 20a8328
commit c96ad66
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html
@@ -48,7 +48,7 @@
 				tooltipEl = document.createElement('div');
 				tooltipEl.id = 'chartjs-tooltip';
 				tooltipEl.innerHTML = "<table></table>"
-				document.body.appendChild(tooltipEl);
+				this._chart.canvas.parentNode.appendChild(tooltipEl);
 			}
 
 			// Hide if no tooltip
@@ -95,12 +95,13 @@
 				tableRoot.innerHTML = innerHtml;
 			}
 
-			var position = this._chart.canvas.getBoundingClientRect();
+			var positionY = this._chart.canvas.offsetTop;
+			var positionX = this._chart.canvas.offsetLeft;
 
 			// Display, position, and set styles for font
 			tooltipEl.style.opacity = 1;
-			tooltipEl.style.left = position.left + tooltip.caretX + 'px';
-			tooltipEl.style.top = position.top + tooltip.caretY + 'px';
+			tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+			tooltipEl.style.top = positionY + tooltip.caretY + 'px';
 			tooltipEl.style.fontFamily = tooltip._fontFamily;
 			tooltipEl.style.fontSize = tooltip.fontSize;
 			tooltipEl.style.fontStyle = tooltip._fontStyle;

diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html
@@ -36,11 +36,10 @@
 
 <body>
 	<div id="canvas-holder" style="width: 300px;">
-		<canvas id="chart-area" width="300" height="300" />
-	</div>
-
-	<div id="chartjs-tooltip">
-		<table></table>
+		<canvas id="chart-area" width="300" height="300"></canvas>
+		<div id="chartjs-tooltip">
+			<table></table>
+		</div>
 	</div>
 
 	<script>
@@ -92,12 +91,13 @@
 			tableRoot.innerHTML = innerHtml;
 		}
 
-		var position = this._chart.canvas.getBoundingClientRect();
+		var positionY = this._chart.canvas.offsetTop;
+		var positionX = this._chart.canvas.offsetLeft;
 
 		// Display, position, and set styles for font
 		tooltipEl.style.opacity = 1;
-		tooltipEl.style.left = position.left + tooltip.caretX + 'px';
-		tooltipEl.style.top = position.top + tooltip.caretY + 'px';
+		tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+		tooltipEl.style.top = positionY + tooltip.caretY + 'px';
 		tooltipEl.style.fontFamily = tooltip._fontFamily;
 		tooltipEl.style.fontSize = tooltip.fontSize;
 		tooltipEl.style.fontStyle = tooltip._fontStyle;

diff --git a/samples/tooltips/custom-points.html b/samples/tooltips/custom-points.html
@@ -37,13 +37,16 @@
 <body>
 	<div id="canvas-holder1" style="width:75%;">
 		<canvas id="chart1"></canvas>
+		<div class="chartjs-tooltip" id="tooltip-0"></div>
+		<div class="chartjs-tooltip" id="tooltip-1"></div>
 	</div>
-	<div class="chartjs-tooltip" id="tooltip-0"></div>
-	<div class="chartjs-tooltip" id="tooltip-1"></div>
 	<script>
 		var customTooltips = function (tooltip) {
 			$(this._chart.canvas).css("cursor", "pointer");
 
+			var positionY = this._chart.canvas.offsetTop;
+			var positionX = this._chart.canvas.offsetLeft;
+
 			$(".chartjs-tooltip").css({
 				opacity: 0,
 			});
@@ -60,8 +63,8 @@
 					$tooltip.html(content);
 					$tooltip.css({
 						opacity: 1,
-						top: dataPoint.y + "px",
-						left: dataPoint.x + "px",
+						top: positionY + dataPoint.y + "px",
+						left: positionX + dataPoint.x + "px",
 					});
 				});
 			}