From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Sun, 12 Jul 2020 11:52:57 +0000 (-0700)
Subject: Fix errors in custom tooltip samples (#7595)
X-Git-Tag: v3.0.0-beta.2~52
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=fb68e91312ad632fcefad0d5883d1d04c13e32ec;p=thirdparty%2FChart.js.git

Fix errors in custom tooltip samples (#7595)
---

diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html
index b2c7798fc..70abf7e4f 100644
--- a/samples/tooltips/custom-line.html
+++ b/samples/tooltips/custom-line.html
@@ -40,24 +40,26 @@
 	<script>
 		Chart.defaults.pointHitDetectionRadius = 1;
 
-		var getOrCreateTooltip = function() {
+		var getOrCreateTooltip = function(chart) {
 			var tooltipEl = document.getElementById('chartjs-tooltip');
 
 			if (!tooltipEl) {
 				tooltipEl = document.createElement('div');
 				tooltipEl.id = 'chartjs-tooltip';
 				tooltipEl.innerHTML = '<table></table>';
-				this._chart.canvas.parentNode.appendChild(tooltipEl);
+				chart.canvas.parentNode.appendChild(tooltipEl);
 			}
 
 			return tooltipEl;
 		};
 
-		var customTooltips = function(tooltip) {
+		var customTooltips = function(context) {
 			// Tooltip Element
-			var tooltipEl = getOrCreateTooltip();
+			var chart = context.chart;
+			var tooltipEl = getOrCreateTooltip(chart);
 
 			// Hide if no tooltip
+			var tooltip = context.tooltip;
 			if (tooltip.opacity === 0) {
 				tooltipEl.style.opacity = 0;
 				return;
@@ -101,14 +103,14 @@
 				tableRoot.innerHTML = innerHtml;
 			}
 
-			var positionY = this._chart.canvas.offsetTop;
-			var positionX = this._chart.canvas.offsetLeft;
+			var positionY = chart.canvas.offsetTop;
+			var positionX = chart.canvas.offsetLeft;
 
 			// Display, position, and set styles for font
 			tooltipEl.style.opacity = 1;
 			tooltipEl.style.left = positionX + tooltip.caretX + 'px';
 			tooltipEl.style.top = positionY + tooltip.caretY + 'px';
-			tooltipEl.style.font = tooltip.bodyFont.string;
+			tooltipEl.style.font = tooltip.options.bodyFont.string;
 			tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
 		};
 
diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html
index 5803fb12c..8be70c975 100644
--- a/samples/tooltips/custom-pie.html
+++ b/samples/tooltips/custom-pie.html
@@ -43,8 +43,9 @@
 	</div>
 
 	<script>
-		Chart.defaults.plugins.tooltip.custom = function(tooltip) {
+		Chart.defaults.plugins.tooltip.custom = function(context) {
 			// Tooltip Element
+			var tooltip = context.tooltip;
 			var tooltipEl = document.getElementById('chartjs-tooltip');
 
 			// Hide if no tooltip
@@ -91,14 +92,15 @@
 				tableRoot.innerHTML = innerHtml;
 			}
 
-			var positionY = this._chart.canvas.offsetTop;
-			var positionX = this._chart.canvas.offsetLeft;
+			var chart = context.chart;
+			var positionY = chart.canvas.offsetTop;
+			var positionX = chart.canvas.offsetLeft;
 
 			// Display, position, and set styles for font
 			tooltipEl.style.opacity = 1;
 			tooltipEl.style.left = positionX + tooltip.caretX + 'px';
 			tooltipEl.style.top = positionY + tooltip.caretY + 'px';
-			tooltipEl.style.font = tooltip.bodyFont.string;
+			tooltipEl.style.font = tooltip.options.bodyFont.string;
 			tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
 		};
 
diff --git a/samples/tooltips/custom-points.html b/samples/tooltips/custom-points.html
index e656c7418..ae5019cf9 100644
--- a/samples/tooltips/custom-points.html
+++ b/samples/tooltips/custom-points.html
@@ -41,16 +41,18 @@
 		<div class="chartjs-tooltip" id="tooltip-1"></div>
 	</div>
 	<script>
-		var customTooltips = function(tooltip) {
-			$(this._chart.canvas).css('cursor', 'pointer');
+		var customTooltips = function(context) {
+			var chart = context.chart;
+			$(chart.canvas).css('cursor', 'pointer');
 
-			var positionY = this._chart.canvas.offsetTop;
-			var positionX = this._chart.canvas.offsetLeft;
+			var positionY = chart.canvas.offsetTop;
+			var positionX = chart.canvas.offsetLeft;
 
 			$('.chartjs-tooltip').css({
 				opacity: 0,
 			});
 
+			var tooltip = context.tooltip;
 			if (!tooltip || !tooltip.opacity) {
 				return;
 			}