]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
projects / thirdparty / Chart.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a0ce746)
Add new properties for the caretX,caretY point of a tooltip. Useful for custom tooltips.
authoretimberg <evert.timberg@gmail.com>
Sat, 15 Oct 2016 21:04:22 +0000 (17:04 -0400)
committerEvert Timberg <evert.timberg+github@gmail.com>
Wed, 19 Oct 2016 11:30:41 +0000 (06:30 -0500)
The custom tooltip sample was updated as well to use the new properties.

docs/09-Advanced.md patch | blob | blame | history
samples/line-customTooltips.html patch | blob | blame | history
src/core/core.tooltip.js patch | blob | blame | history

diff --git a/docs/09-Advanced.md b/docs/09-Advanced.md
index 5ea957179a6d0fbc6ffd05c813a92b338963ed9e..db346bc94d257f6ad09f363e823cd8804ffc0fa0 100644 (file)
--- a/docs/09-Advanced.md
+++ b/docs/09-Advanced.md
@@ -173,6 +173,8 @@ var myPieChart = new Chart(ctx, {
                                // tooltip.text
                                // tooltip.x
                                // tooltip.y
+                               // tooltip.caretX
+                               // tooltip.caretY
                                // etc...
                        }
                }
diff --git a/samples/line-customTooltips.html b/samples/line-customTooltips.html
index 6695cb66346aaa97c34c467da0b69a138b7dc12b..9272caff8b6707f8d6a549a20d4eb7cc7dff493b 100644 (file)
--- 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.caretY - tooltip.caretHeight - tooltip.caretPadding;
         } else {
-          top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
+          top = tooltip.caretY + 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.caretX + '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
index 1e02fee7780428cdedea5ac992de99b1035ea911..af8d3197cd83c10595f31662382b4c10650b3801 100755 (executable)
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -465,14 +465,18 @@ module.exports = function(Chart) {
                                width: existingModel.width,
                                height: existingModel.height
                        };
+                       var tooltipPosition = {
+                               x: existingModel.caretX,
+                               y: existingModel.caretY
+                       };
 
                        var i, len;
 
                        if (active.length) {
                                model.opacity = 1;
 
-                               var labelColors = [],
-                                       tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);
+                               var labelColors = [];
+                               tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);
 
                                var tooltipItems = [];
                                for (i = 0, len = active.length; i < len; ++i) {
@@ -520,6 +524,10 @@ module.exports = function(Chart) {
                        model.width = tooltipSize.width;
                        model.height = tooltipSize.height;
 
+                       // Point where the caret on the tooltip points to
+                       model.caretX = tooltipPosition.x;
+                       model.caretY = tooltipPosition.y;
+
                        me._model = model;
 
                        if (changed && opts.custom) {
Mirror of https://github.com/chartjs/Chart.js.git