Update the tooltip with a new caretPadding setting. Previously this…

… value was essentially hard coded to

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

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

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

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',