Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-25 17:46:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix errors in custom tooltip samples (#7595)

Browse Source
This commit is contained in:
Ben McCann
2020-07-12 04:52:57 -07:00
committed by Evert Timberg
parent 49a9fe3c60
commit 7c370f761d
3 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,24 +40,26 @@
<script>
Chart.defaults.pointHitDetectionRadius = 1;
var getOrCreateTooltip = function() {
var getOrCreateTooltip = function(chart) {
var tooltipEl = document.getElementById('chartjs-tooltip');
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = '<table></table>';
this._chart.canvas.parentNode.appendChild(tooltipEl);
chart.canvas.parentNode.appendChild(tooltipEl);
}
return tooltipEl;
};
var customTooltips = function(tooltip) {
var customTooltips = function(context) {
// Tooltip Element
var tooltipEl = getOrCreateTooltip();
var chart = context.chart;
var tooltipEl = getOrCreateTooltip(chart);
// Hide if no tooltip
var tooltip = context.tooltip;
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
@@ -101,14 +103,14 @@
tableRoot.innerHTML = innerHtml;
}
var positionY = this._chart.canvas.offsetTop;
var positionX = this._chart.canvas.offsetLeft;
var positionY = chart.canvas.offsetTop;
var positionX = chart.canvas.offsetLeft;
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.font = tooltip.bodyFont.string;
tooltipEl.style.font = tooltip.options.bodyFont.string;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};

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

@@ -43,8 +43,9 @@
</div>
<script>
Chart.defaults.plugins.tooltip.custom = function(tooltip) {
Chart.defaults.plugins.tooltip.custom = function(context) {
// Tooltip Element
var tooltip = context.tooltip;
var tooltipEl = document.getElementById('chartjs-tooltip');
// Hide if no tooltip
@@ -91,14 +92,15 @@
tableRoot.innerHTML = innerHtml;
}
var positionY = this._chart.canvas.offsetTop;
var positionX = this._chart.canvas.offsetLeft;
var chart = context.chart;
var positionY = chart.canvas.offsetTop;
var positionX = chart.canvas.offsetLeft;
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.font = tooltip.bodyFont.string;
tooltipEl.style.font = tooltip.options.bodyFont.string;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};

10
samples/tooltips/custom-points.html
View File

@@ -41,16 +41,18 @@
<div class="chartjs-tooltip" id="tooltip-1"></div>
</div>
<script>
var customTooltips = function(tooltip) {
$(this._chart.canvas).css('cursor', 'pointer');
var customTooltips = function(context) {
var chart = context.chart;
$(chart.canvas).css('cursor', 'pointer');
var positionY = this._chart.canvas.offsetTop;
var positionX = this._chart.canvas.offsetLeft;
var positionY = chart.canvas.offsetTop;
var positionX = chart.canvas.offsetLeft;
$('.chartjs-tooltip').css({
opacity: 0,
});
var tooltip = context.tooltip;
if (!tooltip || !tooltip.opacity) {
return;
}