From: Evert Timberg Date: Mon, 12 Oct 2020 14:56:18 +0000 (-0400) Subject: Update custom tooltips to work with multiple charts on a page (#7868) X-Git-Tag: v3.0.0-beta.4~9 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=fcc20bf237503fa73b0ad24b1ae29a8ad5b1f355;p=thirdparty%2FChart.js.git Update custom tooltips to work with multiple charts on a page (#7868) --- diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html index fe5fd0042..aa9e7ce84 100644 --- a/samples/tooltips/custom-line.html +++ b/samples/tooltips/custom-line.html @@ -11,7 +11,7 @@ -webkit-user-select: none; -ms-user-select: none; } - #chartjs-tooltip { + .chartjs-tooltip { opacity: 1; position: absolute; background: rgba(0, 0, 0, .7); @@ -41,11 +41,11 @@ Chart.defaults.pointHitDetectionRadius = 1; var getOrCreateTooltip = function(chart) { - var tooltipEl = document.getElementById('chartjs-tooltip'); + var tooltipEl = chart.canvas.parentNode.querySelector('div'); if (!tooltipEl) { tooltipEl = document.createElement('div'); - tooltipEl.id = 'chartjs-tooltip'; + tooltipEl.classList.add('chartjs-tooltip'); tooltipEl.innerHTML = '

'; chart.canvas.parentNode.appendChild(tooltipEl); } diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html index 8be70c975..7b0680c97 100644 --- a/samples/tooltips/custom-pie.html +++ b/samples/tooltips/custom-pie.html @@ -12,7 +12,7 @@ margin-top: 50px; text-align: center; } - #chartjs-tooltip { + .chartjs-tooltip { opacity: 1; position: absolute; background: rgba(0, 0, 0, .7); @@ -37,16 +37,26 @@