From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Sun, 18 Oct 2020 13:51:48 +0000 (-0400)
Subject: Reduce tooltip implied padding at top and bottom edges of the canvas (#7908)
X-Git-Tag: v3.0.0-beta.5~34
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c68ec576726bc203e6f532398576b0dbc8eff374;p=thirdparty%2FChart.js.git

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 3e2084f85..7b9553c24 100644
--- 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 244205ed2..43bd725b4 100644
--- 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 8571abc38..4ad9c4055 100644
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 9aa6d8344..2e5f3cf8e 100644
--- 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 cecf760a1..0c0e8a701 100644
--- 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.
    */