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

Allow tooltip callback override in dataset #8640

Merged
merged 1 commit into from
Mar 14, 2021
Merged

Allow tooltip callback override in dataset #8640

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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions docs/docs/configuration/tooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,24 +102,26 @@ Allows filtering of [tooltip items](#tooltip-item-context). Must implement at mi

Namespace: `options.plugins.tooltip.callbacks`, the tooltip has the following callbacks for providing text. For all functions, `this` will be the tooltip object created from the `Tooltip` constructor.

Namespace: `data.datasets[].tooltip.callbacks`, items marked with `Yes` in the column `Dataset override` can be overridden per dataset.

All functions are called with the same arguments: a [tooltip item context](#tooltip-item-context). All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.

| Name | Arguments | Description
| ---- | --------- | -----------
| `beforeTitle` | `TooltipItem[], object` | Returns the text to render before the title.
| `title` | `TooltipItem[], object` | Returns text to render as the title of the tooltip.
| `afterTitle` | `TooltipItem[], object` | Returns text to render after the title.
| `beforeBody` | `TooltipItem[], object` | Returns text to render before the body section.
| `beforeLabel` | `TooltipItem, object` | Returns text to render before an individual label. This will be called for each item in the tooltip.
| `label` | `TooltipItem, object` | Returns text to render for an individual item in the tooltip. [more...](#label-callback)
| `labelColor` | `TooltipItem, Chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
| `labelTextColor` | `TooltipItem, Chart` | Returns the colors for the text of the label for the tooltip item.
| `labelPointStyle` | `TooltipItem, Chart` | Returns the point style to use instead of color boxes if usePointStyle is true (object with values `pointStyle` and `rotation`). Default implementation uses the point style from the dataset points. [more...](#label-point-style-callback)
| `afterLabel` | `TooltipItem, object` | Returns text to render after an individual label.
| `afterBody` | `TooltipItem[], object` | Returns text to render after the body section.
| `beforeFooter` | `TooltipItem[], object` | Returns text to render before the footer section.
| `footer` | `TooltipItem[], object` | Returns text to render as the footer of the tooltip.
| `afterFooter` | `TooltipItem[], object` | Text to render after the footer section.
| Name | Arguments | Dataset override | Description
| ---- | --------- | ---------------- | -----------
| `beforeTitle` | `TooltipItem[], object` | | Returns the text to render before the title.
| `title` | `TooltipItem[], object` | | Returns text to render as the title of the tooltip.
| `afterTitle` | `TooltipItem[], object` | | Returns text to render after the title.
| `beforeBody` | `TooltipItem[], object` | | Returns text to render before the body section.
| `beforeLabel` | `TooltipItem, object` | Yes | Returns text to render before an individual label. This will be called for each item in the tooltip.
| `label` | `TooltipItem, object` | Yes | Returns text to render for an individual item in the tooltip. [more...](#label-callback)
| `labelColor` | `TooltipItem, Chart` | Yes | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
| `labelTextColor` | `TooltipItem, Chart` | Yes | Returns the colors for the text of the label for the tooltip item.
| `labelPointStyle` | `TooltipItem, Chart` | Yes | Returns the point style to use instead of color boxes if usePointStyle is true (object with values `pointStyle` and `rotation`). Default implementation uses the point style from the dataset points. [more...](#label-point-style-callback)
| `afterLabel` | `TooltipItem, object` | Yes | Returns text to render after an individual label.
| `afterBody` | `TooltipItem[], object` | | Returns text to render after the body section.
| `beforeFooter` | `TooltipItem[], object` | | Returns text to render before the footer section.
| `footer` | `TooltipItem[], object` | | Returns text to render as the footer of the tooltip.
| `afterFooter` | `TooltipItem[], object` | | Text to render after the footer section.

### Label Callback

Expand Down
19 changes: 13 additions & 6 deletions src/plugins/plugin.tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,11 @@ function createTooltipContext(parent, tooltip, tooltipItems) {
});
}

function overrideCallbacks(callbacks, context) {
const override = context && context.dataset && context.dataset.tooltip && context.dataset.tooltip.callbacks;
return override ? callbacks.override(override) : callbacks;
}

export class Tooltip extends Element {
constructor(config) {
super();
Expand Down Expand Up @@ -451,9 +456,10 @@ export class Tooltip extends Element {
lines: [],
after: []
};
pushOrConcat(bodyItem.before, splitNewlines(callbacks.beforeLabel.call(me, context)));
pushOrConcat(bodyItem.lines, callbacks.label.call(me, context));
pushOrConcat(bodyItem.after, splitNewlines(callbacks.afterLabel.call(me, context)));
const scoped = overrideCallbacks(callbacks, context);
pushOrConcat(bodyItem.before, splitNewlines(scoped.beforeLabel.call(me, context)));
pushOrConcat(bodyItem.lines, scoped.label.call(me, context));
pushOrConcat(bodyItem.after, splitNewlines(scoped.afterLabel.call(me, context)));

bodyItems.push(bodyItem);
});
Expand Down Expand Up @@ -511,9 +517,10 @@ export class Tooltip extends Element {

// Determine colors for boxes
each(tooltipItems, (context) => {
labelColors.push(options.callbacks.labelColor.call(me, context));
labelPointStyles.push(options.callbacks.labelPointStyle.call(me, context));
labelTextColors.push(options.callbacks.labelTextColor.call(me, context));
const scoped = overrideCallbacks(options.callbacks, context);
labelColors.push(scoped.labelColor.call(me, context));
labelPointStyles.push(scoped.labelPointStyle.call(me, context));
labelTextColors.push(scoped.labelTextColor.call(me, context));
});

me.labelColors = labelColors;
Expand Down