Reduce tooltip implied padding at top and bottom edges of the canvas (#7908)

* Allow the tooltip to get closer to the canvas edge

Closer to the top & bottom by considering (height/2) instead of height.

* Update missing options in TS types

* Remove unneeded brackets

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 3e2084f85eece7998cb9c82d5f0118f09632ffe3..7b9553c247ef78a213299900b49e098e1d51f9df 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -234,9 +234,9 @@ function determineAlignment(chart, options, size) {
        let xAlign = 'center';
        let yAlign = 'center';
 
-       if (y < height) {
+       if (y < height / 2) {
                yAlign = 'top';
-       } else if (y > (chart.height - height)) {
+       } else if (y > (chart.height - height / 2)) {
                yAlign = 'bottom';
        }
 

diff --git a/test/fixtures/core.tooltip/opacity.js b/test/fixtures/core.tooltip/opacity.js
index 244205ed2468805f66148f5d6305ca2dae4a102e..43bd725b4d58ceeab600b23edde0a2852e2332a5 100644 (file)
--- a/test/fixtures/core.tooltip/opacity.js
+++ b/test/fixtures/core.tooltip/opacity.js
@@ -17,7 +17,7 @@ module.exports = {
                type: 'line',
                data: {
                        datasets: [{
-                               data: [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+                               data: [8, 8, 8, 8, 8, 8, 7, 8, 8, 8, 8],
                                pointBorderColor: '#ff0000',
                                pointBackgroundColor: '#00ff00',
                                showLine: false
@@ -29,7 +29,7 @@ module.exports = {
                                showLine: false
                        }, {
                                label: '',
-                               data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                               data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
                                showLine: false
                        }],
                        labels: ['', '', '', '', '', '', '', '', '', '', '']

diff --git a/test/fixtures/core.tooltip/opacity.png b/test/fixtures/core.tooltip/opacity.png
index 8571abc38eb96ab3c7dca05bc9bb99a26d7f10e2..4ad9c4055fb107e1b2f70477944b868c4999f27b 100644 (file)
Binary files a/test/fixtures/core.tooltip/opacity.png and b/test/fixtures/core.tooltip/opacity.png differ

diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js
index 9aa6d83444df8b548f55d5f05edba57e9ffb5a2b..2e5f3cf8ea57dd0b703f4193df64b2312ca2ae3c 100644 (file)
--- a/test/specs/plugin.tooltip.tests.js
+++ b/test/specs/plugin.tooltip.tests.js
@@ -386,8 +386,8 @@ describe('Plugin.Tooltip', function() {
 
                        expect(tooltip.options.xPadding).toEqual(6);
                        expect(tooltip.options.yPadding).toEqual(6);
-                       expect(tooltip.xAlign).toEqual('center');
-                       expect(tooltip.yAlign).toEqual('top');
+                       expect(tooltip.xAlign).toEqual('left');
+                       expect(tooltip.yAlign).toEqual('center');
 
                        expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({
                                color: '#fff',
@@ -462,8 +462,8 @@ describe('Plugin.Tooltip', function() {
                                }]
                        }));
 
-                       expect(tooltip.x).toBeCloseToPixel(214);
-                       expect(tooltip.y).toBeCloseToPixel(190);
+                       expect(tooltip.x).toBeCloseToPixel(267);
+                       expect(tooltip.y).toBeCloseToPixel(75);
 
                        done();
                });

diff --git a/types/plugins/index.d.ts b/types/plugins/index.d.ts
index cecf760a1aa7c1e15c2c705c5cc7aa8effa97620..0c0e8a701592d53e2eef1a3ef162cb9e3d8b2bd8 100644 (file)
--- a/types/plugins/index.d.ts
+++ b/types/plugins/index.d.ts
@@ -234,13 +234,15 @@ export interface ITitleChartOptions {
   title: ITitleOptions;
 }
 
+export type TooltipAlignment = 'start' | 'center' | 'end';
+
 export interface TooltipModel {
   // The items that we are rendering in the tooltip. See Tooltip Item Interface section
   dataPoints: ITooltipItem[];
 
   // Positioning
-  xAlign: 'start' | 'center' | 'end';
-  yAlign: 'start' | 'center' | 'end';
+  xAlign: TooltipAlignment;
+  yAlign: TooltipAlignment;
 
   // X and Y properties are the top left of the tooltip
   x: number;
@@ -348,6 +350,12 @@ export interface ITooltipOptions extends IHoverInteractionOptions {
    */
   position: 'average' | 'nearest';
 
+  /**
+   * Override the tooltip alignment calculations
+   */
+  xAlign: TooltipAlignment;
+  yAlign: TooltipAlignment;
+
   /**
    * Sort tooltip items.
    */