Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merge tooltip padding settings #8493

Merged
merged 1 commit into from Feb 22, 2021
Merged

Merge tooltip padding settings #8493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 2 additions & 3 deletions docs/docs/configuration/tooltip.md
View file
Open in desktop
Expand Up @@ -31,8 +31,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips
| `footerAlign` | `string` | `'left'` | Horizontal alignment of the footer text lines. [more...](#alignment)
| `footerSpacing` | `number` | `2` | Spacing to add to top and bottom of each footer line.
| `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.
| `padding` | | `6` | Padding inside the tooltip on the 4 sides
| `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.
Expand Down Expand Up @@ -320,7 +319,7 @@ var myPieChart = new Chart(ctx, {
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.font = tooltipModel.bodyFont.string;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
tooltipEl.style.pointerEvents = 'none';
}
}
Expand Down
1 change: 1 addition & 0 deletions docs/docs/getting-started/v3-migration.md
View file
Open in desktop
Expand Up @@ -237,6 +237,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
* All properties of tooltip model related to the tooltip options have been moved to reside within the `options` property.
* The callbacks no longer are given a `data` parameter. The tooltip item parameter contains the chart and dataset instead
* The tooltip item's `index` parameter was renamed to `dataIndex` and `value` was renamed to `formattedValue`
* The `xPadding` and `yPadding` options were merged into a single `padding` object

## Developer migration

Expand Down
3 changes: 1 addition & 2 deletions samples/tooltips/border.html
View file
Open in desktop
Expand Up @@ -54,8 +54,7 @@
position: 'nearest',
mode: 'index',
intersect: false,
yPadding: 10,
xPadding: 10,
padding: 10,
caretSize: 8,
backgroundColor: 'rgba(72, 241, 12, 1)',
titleFont: {
Expand Down
2 changes: 1 addition & 1 deletion samples/tooltips/custom-line.html
View file
Open in desktop
Expand Up @@ -111,7 +111,7 @@
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.font = tooltip.options.bodyFont.string;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
tooltipEl.style.padding = tooltip.padding + 'px ' + tooltip.padding + 'px';
};

var lineChartData = {
Expand Down
2 changes: 1 addition & 1 deletion samples/tooltips/custom-pie.html
View file
Open in desktop
Expand Up @@ -111,7 +111,7 @@
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.font = tooltip.options.bodyFont.string;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
tooltipEl.style.padding = tooltip.padding + 'px ' + tooltip.padding + 'px';
};

var config = {
Expand Down
19 changes: 12 additions & 7 deletions src/plugins/plugin.tooltip.js
View file
Open in desktop
@@ -1,6 +1,7 @@
import Animations from '../core/core.animations';
import Element from '../core/core.element';
import {each, noop, isNullOrUndef, isArray, _elementsEqual} from '../helpers/helpers.core';
import {toPadding} from '../helpers/helpers.options';
import {getRtlAdapter, overrideTextDirection, restoreTextDirection} from '../helpers/helpers.rtl';
import {distanceBetweenPoints} from '../helpers/helpers.math';
import {drawPoint, toFontString} from '../helpers';
Expand Down Expand Up @@ -143,7 +144,8 @@ function getTooltipSize(tooltip) {
const footerLineCount = footer.length;
const bodyLineItemCount = body.length;

let height = options.yPadding * 2; // Tooltip Padding
const padding = toPadding(options.padding);
let height = padding.height;
let width = 0;

// Count of all lines in the body
Expand Down Expand Up @@ -201,7 +203,7 @@ function getTooltipSize(tooltip) {
ctx.restore();

// Add padding
width += 2 * options.xPadding;
width += 2 * padding.width;

return {width, height};
}
Expand Down Expand Up @@ -322,11 +324,13 @@ function getBackgroundPoint(options, size, alignment, chart) {

function getAlignedX(tooltip, align) {
const options = tooltip.options;
const padding = toPadding(options.padding);

return align === 'center'
? tooltip.x + tooltip.width / 2
: align === 'right'
? tooltip.x + tooltip.width - options.xPadding
: tooltip.x + options.xPadding;
? tooltip.x + tooltip.width - padding.right
: tooltip.x + padding.left;
}

/**
Expand Down Expand Up @@ -887,6 +891,8 @@ export class Tooltip extends Element {
// IE11/Edge does not like very small opacities, so snap to 0
opacity = Math.abs(opacity) < 1e-3 ? 0 : opacity;

const padding = toPadding(options.padding);

// Truthy/falsey value for empty tooltip
const hasTooltipContent = me.title.length || me.beforeBody.length || me.body.length || me.afterBody.length || me.footer.length;

Expand All @@ -899,7 +905,7 @@ export class Tooltip extends Element {

overrideTextDirection(ctx, options.textDirection);

pt.y += options.yPadding;
pt.y += padding.top;

// Titles
me.drawTitle(pt, ctx);
Expand Down Expand Up @@ -1096,8 +1102,7 @@ export default {
style: 'bold',
},
footerAlign: 'left',
yPadding: 6,
xPadding: 6,
padding: 6,
caretPadding: 2,
caretSize: 5,
cornerRadius: 6,
Expand Down
26 changes: 16 additions & 10 deletions test/specs/plugin.tooltip.tests.js
View file
Open in desktop
Expand Up @@ -55,6 +55,12 @@ describe('Plugin.Tooltip', function() {
tooltip: {
mode: 'index',
intersect: false,
padding: {
left: 6,
top: 6,
right: 6,
bottom: 6
}
}
},
hover: {
Expand All @@ -74,8 +80,12 @@ describe('Plugin.Tooltip', function() {

await jasmine.triggerMouseEvent(chart, 'mousemove', {x: point.x, y: chart.chartArea.top + 10});

expect(tooltip.options.xPadding).toEqual(6);
expect(tooltip.options.yPadding).toEqual(6);
expect(tooltip.options.padding).toEqualOptions({
left: 6,
top: 6,
right: 6,
bottom: 6,
});
expect(tooltip.xAlign).toEqual('left');
expect(tooltip.yAlign).toEqual('center');
expect(tooltip.options.bodyColor).toEqual('#fff');
Expand Down Expand Up @@ -234,8 +244,7 @@ describe('Plugin.Tooltip', function() {
var tooltip = chart.tooltip;
var defaults = Chart.defaults;

expect(tooltip.options.xPadding).toEqual(6);
expect(tooltip.options.yPadding).toEqual(6);
expect(tooltip.options.padding).toEqual(6);
expect(tooltip.xAlign).toEqual('left');
expect(tooltip.yAlign).toEqual('center');

Expand Down Expand Up @@ -384,8 +393,7 @@ describe('Plugin.Tooltip', function() {
var tooltip = chart.tooltip;
var defaults = Chart.defaults;

expect(tooltip.options.xPadding).toEqual(6);
expect(tooltip.options.yPadding).toEqual(6);
expect(tooltip.options.padding).toEqual(6);
expect(tooltip.xAlign).toEqual('left');
expect(tooltip.yAlign).toEqual('center');

Expand Down Expand Up @@ -1178,8 +1186,7 @@ describe('Plugin.Tooltip', function() {
var tooltip = chart.tooltip;
var defaults = Chart.defaults;

expect(tooltip.options.xPadding).toEqual(6);
expect(tooltip.options.yPadding).toEqual(6);
expect(tooltip.options.padding).toEqual(6);
expect(tooltip.xAlign).toEqual('center');
expect(tooltip.yAlign).toEqual('top');

Expand Down Expand Up @@ -1270,8 +1277,7 @@ describe('Plugin.Tooltip', function() {
options: {
enabled: true,

xPadding: 5,
yPadding: 5,
padding: 5,

// Body
bodyFont: {
Expand Down
9 changes: 2 additions & 7 deletions types/index.esm.d.ts
View file
Open in desktop
Expand Up @@ -2418,15 +2418,10 @@ export interface TooltipOptions<TParsedData> extends CoreInteractionOptions {
*/
footerAlign: TextAlign;
/**
* Padding to add on left and right of tooltip.
* Padding to add to the tooltip
* @default 6
*/
xPadding: number;
/**
* Padding to add on top and bottom of tooltip.
* @default 6
*/
yPadding: number;
padding: number | ChartArea;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to this PR really, but looks like the ChartArea could use more generic name.

/**
* Extra distance to move the end of the tooltip arrow away from the tooltip point.
* @default 2
Expand Down