From 1b277a71e4af83d19a87d09ffeb06841c275fce9 Mon Sep 17 00:00:00 2001
From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Sat, 28 May 2016 10:48:33 -0400
Subject: [PATCH] Fix pie custom tooltip sample

---
 samples/pie-customTooltips.html | 234 +++++++++++++++-----------------
 1 file changed, 108 insertions(+), 126 deletions(-)
diff --git a/samples/pie-customTooltips.html b/samples/pie-customTooltips.html
index 2de9c897e..2f5916539 100644
--- a/samples/pie-customTooltips.html
+++ b/samples/pie-customTooltips.html
@@ -13,63 +13,31 @@
         text-align: center;
     }
     #chartjs-tooltip {
-        opacity: 1;
-        position: absolute;
-        background: rgba(0, 0, 0, .7);
-        color: white;
-        padding: 3px;
-        border-radius: 3px;
-        -webkit-transition: all .1s ease;
-        transition: all .1s ease;
-        pointer-events: none;
-        -webkit-transform: translate(-50%, 0);
-        transform: translate(-50%, 0);
+      opacity: 1;
+      position: absolute;
+      background: rgba(0, 0, 0, .7);
+      color: white;
+      border-radius: 3px;
+      -webkit-transition: all .1s ease;
+      transition: all .1s ease;
+      pointer-events: none;
+      -webkit-transform: translate(-50%, 0);
+      transform: translate(-50%, 0);
     }
-    #chartjs-tooltip.below {
-        -webkit-transform: translate(-50%, 0);
-        transform: translate(-50%, 0);
-    }
-    #chartjs-tooltip.below:before {
-        border: solid;
-        border-color: #111 transparent;
-        border-color: rgba(0, 0, 0, .8) transparent;
-        border-width: 0 8px 8px 8px;
-        bottom: 1em;
-        content: "";
-        display: block;
-        left: 50%;
-        position: absolute;
-        z-index: 99;
-        -webkit-transform: translate(-50%, -100%);
-        transform: translate(-50%, -100%);
-    }
-    #chartjs-tooltip.above {
-        -webkit-transform: translate(-50%, -100%);
-        transform: translate(-50%, -100%);
-    }
-    #chartjs-tooltip.above:before {
-        border: solid;
-        border-color: #111 transparent;
-        border-color: rgba(0, 0, 0, .8) transparent;
-        border-width: 8px 8px 0 8px;
-        bottom: 1em;
-        content: "";
-        display: block;
-        left: 50%;
-        top: 100%;
-        position: absolute;
-        z-index: 99;
-        -webkit-transform: translate(-50%, 0);
-        transform: translate(-50%, 0);
+
+    .chartjs-tooltip-key {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
     }
     </style>
 </head>
 
 <body>
-    <div id="canvas-holder">
+    <div id="canvas-holder" style="width: 50px;">
         <canvas id="chart-area1" width="50" height="50" />
     </div>
-    <div id="canvas-holder">
+    <div id="canvas-holder" style="width: 300px;">
         <canvas id="chart-area2" width="300" height="300" />
     </div>
 
@@ -77,96 +45,110 @@
 
 
     <script>
-    Chart.defaults.global.customTooltips = function(tooltip) {
+    Chart.defaults.global.tooltips.custom = function(tooltip) {
 
     	// Tooltip Element
-        var tooltipEl = $('#chartjs-tooltip');
+      var tooltipEl = $('#chartjs-tooltip');
 
-        // Hide if no tooltip
-        if (!tooltip) {
-            tooltipEl.css({
-                opacity: 0
-            });
-            return;
-        }
+      if (!tooltipEl[0]) {
+        $('body').append('<div id="chartjs-tooltip"></div>');
+        tooltipEl = $('#chartjs-tooltip');
+      }
 
-        // Set caret Position
-        tooltipEl.removeClass('above below');
-        tooltipEl.addClass(tooltip.yAlign);
-
-        // Set Text
-        tooltipEl.html(tooltip.text);
-
-        // Find Y Location on page
-        var top;
-        if (tooltip.yAlign == 'above') {
-            top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
-        } else {
-            top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
-        }
-
-        //Function to find absolution position of the element and not just it's relative position
-        function getPosition (element) {
-            var top = 0, left = 0;
-            do {
-                top += element.offsetTop || 0;
-                left += element.offsetLeft || 0;
-                element = element.offsetParent;
-            } while (element);
-
-            return {
-                top: top,
-                left: left
-            };
-        };
-
-        //Finding absolute position of the chart canvas
-        var position = getPosition(tooltip.chart.canvas)
-        
-        // Display, position, and set styles for font
+      // Hide if no tooltip
+      if (!tooltip.opacity) {
         tooltipEl.css({
-            opacity: 1,
-            left: position.left + tooltip.x + 'px',
-            top: position.top + top + 'px',
-            fontFamily: tooltip.fontFamily,
-            fontSize: tooltip.fontSize,
-            fontStyle: tooltip.fontStyle,
+          opacity: 0
         });
+        $('.chartjs-wrap canvas')
+          .each(function(index, el) {
+            $(el).css('cursor', 'default');
+          });
+        return;
+      }
+
+      $(this._chart.canvas).css('cursor', 'pointer');
+
+      // Set caret Position
+      tooltipEl.removeClass('above below no-transform');
+      if (tooltip.yAlign) {
+        tooltipEl.addClass(tooltip.yAlign);
+      } else {
+        tooltipEl.addClass('no-transform');
+      }
+
+      // Set Text
+      if (tooltip.body) {
+        var innerHtml = [
+          (tooltip.beforeTitle || []).join('\n'), (tooltip.title || []).join('\n'), (tooltip.afterTitle || []).join('\n'), (tooltip.beforeBody || []).join('\n'), (tooltip.body || []).join('\n'), (tooltip.afterBody || []).join('\n'), (tooltip.beforeFooter || [])
+          .join('\n'), (tooltip.footer || []).join('\n'), (tooltip.afterFooter || []).join('\n')
+        ];
+        tooltipEl.html(innerHtml.join('\n'));
+      }
+
+      // Find Y Location on page
+      var top = 0;
+      if (tooltip.yAlign) {
+        if (tooltip.yAlign == 'above') {
+          top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
+        } else {
+          top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
+        }
+      }
+
+      var position = $(this._chart.canvas)[0].getBoundingClientRect();
+
+      // Display, position, and set styles for font
+      tooltipEl.css({
+        opacity: 1,
+        width: tooltip.width ? (tooltip.width + 'px') : 'auto',
+        left: position.left + tooltip.x + 'px',
+        top: position.top + top + 'px',
+        fontFamily: tooltip._fontFamily,
+        fontSize: tooltip.fontSize,
+        fontStyle: tooltip._fontStyle,
+        padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
+      });
     };
 
-    var pieData = [{
-        value: 300,
-        color: "#F7464A",
-        highlight: "#FF5A5E",
-        label: "Red"
-    }, {
-        value: 50,
-        color: "#46BFBD",
-        highlight: "#5AD3D1",
-        label: "Green"
-    }, {
-        value: 100,
-        color: "#FDB45C",
-        highlight: "#FFC870",
-        label: "Yellow"
-    }, {
-        value: 40,
-        color: "#949FB1",
-        highlight: "#A8B3C5",
-        label: "Grey"
-    }, {
-        value: 120,
-        color: "#4D5360",
-        highlight: "#616774",
-        label: "Dark Grey"
-    }];
+    var config = {
+        type: 'pie',
+        data: {
+            datasets: [{
+                data: [300, 50, 100, 40, 10],
+                backgroundColor: [
+                    "#F7464A",
+                    "#46BFBD",
+                    "#FDB45C",
+                    "#949FB1",
+                    "#4D5360",
+                ],
+            }],
+            labels: [
+                "Red",
+                "Green",
+                "Yellow",
+                "Grey",
+                "Dark Grey"
+            ]
+        },
+        options: {
+            responsive: true,
+            legend: {
+                display: false
+            },
+            tooltips: {
+                enabled: false,
+            }
+        }
+    };
 
     window.onload = function() {
         var ctx1 = document.getElementById("chart-area1").getContext("2d");
-        window.myPie = new Chart(ctx1).Pie(pieData);
+        window.myPie = new Chart(ctx1, config);
 
         var ctx2 = document.getElementById("chart-area2").getContext("2d");
-        window.myPie = new Chart(ctx2).Pie(pieData);
+        window.myPie = new Chart(ctx2, config);
     };
     </script>
 </body>
