diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 13577f05d6f..21387f14011 100644 --- 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 15574a8274a..3428f4ac9b3 100755 --- 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 93cfb3bea36..886e43a2fdb 100755 --- 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',