Update the tooltip with a new `caretPadding` setting. Previously this value was essen...

 2 because of a typo that read it from the positioner output. Based on #3599 we agreed to make this into
a config setting.

diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
index 13577f05d6fda195eafb622d3127e83db98b6d18..21387f14011895491d1f3e1385f7e7866aee8357 100644 (file)
--- a/docs/configuration/tooltip.md
+++ b/docs/configuration/tooltip.md
@@ -34,6 +34,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
 | `footerMarginTop` | `Number` | `6` | Margin to add before drawing the footer.
 | `xPadding` | `Number` | `6` | Padding to add on left and right of tooltip.
 | `yPadding` | `Number` | `6` | Padding to add on top and bottom of tooltip.
+| `caretPadding` | `Number` | `2` | Extra distance to move the end of the tooltip arrow away from the tooltip point.
 | `caretSize` | `Number` | `5` | Size, in px, of the tooltip arrow.
 | `cornerRadius` | `Number` | `6` | Radius of tooltip corner curves.
 | `multiKeyBackground` | Color | `'#fff'` | Color to draw behind the colored boxes when multiple items are in the tooltip

diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index 15574a8274a85ce69cc9745c5f5bf022008ec71b..3428f4ac9b30f59d7f24b56268025e42a9782e60 100755 (executable)
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -34,6 +34,7 @@ module.exports = function(Chart) {
                footerAlign: 'left',
                yPadding: 6,
                xPadding: 6,
+               caretPadding: 2,
                caretSize: 5,
                cornerRadius: 6,
                multiKeyBackground: '#fff',
@@ -522,7 +523,7 @@ module.exports = function(Chart) {
                                // Initial positioning and colors
                                model.x = Math.round(tooltipPosition.x);
                                model.y = Math.round(tooltipPosition.y);
-                               model.caretPadding = helpers.getValueOrDefault(tooltipPosition.padding, 2);
+                               model.caretPadding = opts.caretPadding;
                                model.labelColors = labelColors;
 
                                // data points

diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js
index 93cfb3bea360d4719a2c1a0f138e2b1c14463e4d..886e43a2fdb17a27a3c7431ee85b366b28bdaa21 100755 (executable)
--- a/test/specs/core.tooltip.tests.js
+++ b/test/specs/core.tooltip.tests.js
@@ -641,6 +641,58 @@ describe('Core.Tooltip', function() {
                }));
        });
 
+       it('should set the caretPadding based on a config setting', function() {
+               var chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       label: 'Dataset 1',
+                                       data: [10, 20, 30],
+                                       pointHoverBorderColor: 'rgb(255, 0, 0)',
+                                       pointHoverBackgroundColor: 'rgb(0, 255, 0)',
+                                       tooltipHidden: true
+                               }, {
+                                       label: 'Dataset 2',
+                                       data: [40, 40, 40],
+                                       pointHoverBorderColor: 'rgb(0, 0, 255)',
+                                       pointHoverBackgroundColor: 'rgb(0, 255, 255)'
+                               }],
+                               labels: ['Point 1', 'Point 2', 'Point 3']
+                       },
+                       options: {
+                               tooltips: {
+                                       caretPadding: 10
+                               }
+                       }
+               });
+
+               // Trigger an event over top of the
+               var meta0 = chart.getDatasetMeta(0);
+               var point0 = meta0.data[1];
+
+               var node = chart.canvas;
+               var rect = node.getBoundingClientRect();
+
+               var evt = new MouseEvent('mousemove', {
+                       view: window,
+                       bubbles: true,
+                       cancelable: true,
+                       clientX: rect.left + point0._model.x,
+                       clientY: rect.top + point0._model.y
+               });
+
+               // Manually trigger rather than having an async test
+               node.dispatchEvent(evt);
+
+               // Check and see if tooltip was displayed
+               var tooltip = chart.tooltip;
+
+               expect(tooltip._model).toEqual(jasmine.objectContaining({
+                       // Positioning
+                       caretPadding: 10,
+               }));
+       });
+
        it('Should have dataPoints', function() {
                var chart = window.acquireChart({
                        type: 'line',