Fix errors in custom tooltip samples (#7595)

diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html
index b2c7798fc8ad747f437e387bb02fab4e4ce8c3d2..70abf7e4f65b65b6edca23cf318014bd2fb4acd5 100644 (file)
--- 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 5803fb12c80bf5da0e1f6977ecb65661a6af5004..8be70c975c992c33f4d750823db3fce140d4910c 100644 (file)
--- 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 e656c74184f74207fbe011401767455e50edf862..ae5019cf93972bfa4a4f8c824f7f0d2f8c377f3e 100644 (file)
--- 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;
                        }