Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 04:09:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update custom tooltip documentation and samples (#5166)

Browse Source
This commit is contained in:
Evert Timberg 2018-01-21 16:47:50 -05:00 committed by GitHub
parent f82c8adf39
commit 274fca68c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/configuration/tooltip.md
View File

@ -6,7 +6,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
| Name | Type | Default | Description | Name | Type | Default | Description
| -----| ---- | --------| ----------- | -----| ---- | --------| -----------
| `enabled` | `Boolean` | `true` | Are tooltips enabled | `enabled` | `Boolean` | `true` | Are on-canvas tooltips enabled
| `custom` | `Function` | `null` | See [custom tooltip](#external-custom-tooltips) section. | `custom` | `Function` | `null` | See [custom tooltip](#external-custom-tooltips) section.
| `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. [more...](../general/interactions/modes.md#interaction-modes). | `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. [more...](../general/interactions/modes.md#interaction-modes).
| `intersect` | `Boolean` | `true` | if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times. | `intersect` | `Boolean` | `true` | if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
@ -191,6 +191,9 @@ var myPieChart = new Chart(ctx, {
data: data, data: data,
options: { options: {
tooltips: { tooltips: {
// Disable the on-canvas tooltip
enabled: false,
custom: function(tooltipModel) { custom: function(tooltipModel) {
// Tooltip Element // Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip'); var tooltipEl = document.getElementById('chartjs-tooltip');
@ -199,7 +202,7 @@ var myPieChart = new Chart(ctx, {
if (!tooltipEl) { if (!tooltipEl) {
tooltipEl = document.createElement('div'); tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip'; tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = "<table></table>" tooltipEl.innerHTML = "<table></table>";
document.body.appendChild(tooltipEl); document.body.appendChild(tooltipEl);
} }
@ -238,7 +241,7 @@ var myPieChart = new Chart(ctx, {
var style = 'background:' + colors.backgroundColor; var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor; style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px'; style += '; border-width: 2px';
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>'; var span = '<span style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>'; innerHtml += '<tr><td>' + span + body + '</td></tr>';
}); });
innerHtml += '</tbody>'; innerHtml += '</tbody>';
@ -252,11 +255,12 @@ var myPieChart = new Chart(ctx, {
// Display, position, and set styles for font // Display, position, and set styles for font
tooltipEl.style.opacity = 1; tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + tooltipModel.caretX + 'px'; tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + tooltipModel.caretY + 'px'; tooltipEl.style.top = position.top + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._fontFamily; tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.fontSize; tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._fontStyle; tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px'; tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
} }
} }
@ -264,7 +268,7 @@ var myPieChart = new Chart(ctx, {
}); });
``` ```
See `samples/tooltips/line-customTooltips.html` for examples on how to get started. See [samples](http://www.chartjs.org/samples/) for examples on how to get started with custom tooltips.
## Tooltip Model ## Tooltip Model
The tooltip model contains parameters that can be used to render the tooltip. The tooltip model contains parameters that can be used to render the tooltip.

6
samples/tooltips/custom-line.html
View File

@ -102,9 +102,9 @@
tooltipEl.style.opacity = 1; tooltipEl.style.opacity = 1;
tooltipEl.style.left = positionX + tooltip.caretX + 'px'; tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px'; tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.fontFamily = tooltip._fontFamily; tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
tooltipEl.style.fontSize = tooltip.fontSize; tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltip._fontStyle; tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
}; };

6
samples/tooltips/custom-pie.html
View File

@ -98,9 +98,9 @@
tooltipEl.style.opacity = 1; tooltipEl.style.opacity = 1;
tooltipEl.style.left = positionX + tooltip.caretX + 'px'; tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px'; tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.fontFamily = tooltip._fontFamily; tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
tooltipEl.style.fontSize = tooltip.fontSize; tooltipEl.style.fontSize = tooltip.bodyFontSize;
tooltipEl.style.fontStyle = tooltip._fontStyle; tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
}; };