Add new properties for the top,left point of a tooltip. used for cust…

…om tooltips. The custom tooltip sample was updated as well
chartjs · Oct 15, 2016 · d8fd946 · d8fd946
1 parent a86c47c
commit d8fd946
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 37 deletions.
diff --git a/samples/line-customTooltips.html b/samples/line-customTooltips.html
@@ -4,7 +4,6 @@
 <head>
   <title>Line Chart with Custom Tooltips</title>
   <script src="../dist/Chart.bundle.js"></script>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <style>
     canvas{
       -moz-user-select: none;
@@ -34,76 +33,82 @@
 
 <body>
   <div id="canvas-holder1" style="width:75%;">
-    <canvas id="chart1"/>
+    <canvas id="chart"/>
   </div>
   <script>
-    window.count = 0;
     Chart.defaults.global.pointHitDetectionRadius = 1;
-    var customTooltips = function(tooltip) {
 
+    var customTooltips = function(tooltip) {
       // Tooltip Element
-      var tooltipEl = $('#chartjs-tooltip');
+      var tooltipEl = document.getElementById('chartjs-tooltip');
 
-      if (!tooltipEl[0]) {
-        $('body').append('<div id="chartjs-tooltip"></div>');
-        tooltipEl = $('#chartjs-tooltip');
+      if (!tooltipEl) {
+        var div = document.createElement('div');
+        div.id = 'chartjs-tooltip';
+        document.body.appendChild(div);
+        tooltipEl = document.getElementById('chartjs-tooltip');
       }
 
       // Hide if no tooltip
-      if (!tooltip.opacity) {
-        tooltipEl.css({
-          opacity: 0
-        });
-        $('.chartjs-wrap canvas')
-          .each(function(index, el) {
-            $(el).css('cursor', 'default');
-          });
+      if (tooltip.opacity === 0) {
+        tooltipEl.style.opacity = 0;
+        document.querySelector('.chartjs-wrap').style.cursor = 'default';
         return;
       }
 
-      $(this._chart.canvas).css('cursor', 'pointer');
+      this._chart.canvas.style.cursor = 'pointer';
 
       // Set caret Position
-      tooltipEl.removeClass('above below no-transform');
+      tooltipEl.classList.remove('above', 'below', 'no-transform');
       if (tooltip.yAlign) {
-        tooltipEl.addClass(tooltip.yAlign);
+        tooltipEl.classList.add(tooltip.yAlign);
       } else {
-        tooltipEl.addClass('no-transform');
+        tooltipEl.classList.add('no-transform');
+      }
+
+      function joinBody(bodyItem) {
+        return [].concat(bodyItem.before, bodyItem.lines, bodyItem.after).join('\n')
       }
 
       // 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')
+          (tooltip.beforeTitle || []).join('\n'), 
+          (tooltip.title || []).join('\n'), 
+          (tooltip.afterTitle || []).join('\n'), 
+          (tooltip.beforeBody || []).join('\n'), 
+          (tooltip.body || []).map(joinBody).join('\n'), 
+          (tooltip.afterBody || []).join('\n'), 
+          (tooltip.beforeFooter || []).join('\n'), 
+          (tooltip.footer || []).join('\n'), 
+          (tooltip.afterFooter || []).join('\n')
         ];
-        tooltipEl.html(innerHtml.join('\n'));
+        tooltipEl.innerHTML = 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;
+          top = tooltip.top - tooltip.caretHeight - tooltip.caretPadding;
         } else {
-          top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
+          top = tooltip.top + tooltip.caretHeight + tooltip.caretPadding;
         }
       }
 
-      var position = $(this._chart.canvas)[0].getBoundingClientRect();
+      var position = this._chart.canvas.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',
-      });
+      tooltipEl.style.opacity = 1;
+      tooltipEl.style.width = tooltip.width ? (tooltip.width + 'px') : 'auto';
+      tooltipEl.style.left = position.left + tooltip.left + 'px';
+      tooltipEl.style.top = position.top + top + 'px';
+      tooltipEl.style.fontFamily = tooltip._fontFamily;
+      tooltipEl.style.fontSize = tooltip.fontSize;
+      tooltipEl.style.fontStyle = tooltip._fontStyle;
+      tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
     };
+
     var randomScalingFactor = function() {
       return Math.round(Math.random() * 100);
     };
@@ -119,7 +124,7 @@
     };
 
     window.onload = function() {
-      var chartEl = document.getElementById("chart1");
+      var chartEl = document.getElementById("chart");
       window.myLine = new Chart(chartEl, {
         type: 'line',
         data: lineChartData,

diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
@@ -517,6 +517,8 @@ module.exports = function(Chart) {
 			model.yAlign = alignment.yAlign;
 			model.x = backgroundPoint.x;
 			model.y = backgroundPoint.y;
+			model.left = tooltipPosition.x;
+			model.top = tooltipPosition.y;
 			model.width = tooltipSize.width;
 			model.height = tooltipSize.height;