Skip to content

Commit 4d034a0

Browse files
authored
Add documentation about setting default tooltip font (#11968)
1 parent 79773b7 commit 4d034a0

File tree

1 file changed

+17
-1
lines changed

1 file changed

+17
-1
lines changed

docs/configuration/tooltip.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
Namespace: `options.plugins.tooltip`, the global options for the chart tooltips is defined in `Chart.defaults.plugins.tooltip`.
66

7+
:::warning
8+
The `titleFont`, `bodyFont` and `footerFont` options default to the `Chart.defaults.font` options. To change the overrides for those options, you will need to pass a function that returns a font object. See section about [overriding default fonts](#default-font-overrides) for extra information below.
9+
:::
10+
711
| Name | Type | Default | Description
812
| ---- | ---- | ------- | -----------
913
| `enabled` | `boolean` | `true` | Are on-canvas tooltips enabled?
@@ -420,7 +424,7 @@ Tooltip.positioners.myCustomPositioner = function(elements, eventPosition) {
420424
};
421425

422426
// Then, to use it...
423-
new Chart.js(ctx, {
427+
new Chart(ctx, {
424428
data,
425429
options: {
426430
plugins: {
@@ -443,3 +447,15 @@ declare module 'chart.js' {
443447
}
444448
}
445449
```
450+
451+
## Default font overrides
452+
453+
By default, the `titleFont`, `bodyFont` and `footerFont` listen to the `Chart.defaults.font` options for setting its values.
454+
Overriding these normally by accessing the object won't work because it is backed by a get function that looks to the default `font` namespace.
455+
So you will need to override this get function with your own function that returns the desired config.
456+
457+
Example:
458+
459+
```javascript
460+
Chart.defaults.plugins.tooltip.titleFont = () => ({ size: 20, lineHeight: 1.2, weight: 800 });
461+
```

0 commit comments

Comments
 (0)