]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
projects / thirdparty / Chart.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: cdd742d)
Update custom tooltips to work with multiple charts on a page (#7868)
authorEvert Timberg <evert.timberg+github@gmail.com>
Mon, 12 Oct 2020 14:56:18 +0000 (10:56 -0400)
committerGitHub <noreply@github.com>
Mon, 12 Oct 2020 14:56:18 +0000 (10:56 -0400)
samples/tooltips/custom-line.html patch | blob | blame | history
samples/tooltips/custom-pie.html patch | blob | blame | history

diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html
index fe5fd00422e497608e2e4413346a8cefc2883e8c..aa9e7ce84ac69bed68e04769e86445126e60f002 100644 (file)
--- 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 = '<table></table>';
                                chart.canvas.parentNode.appendChild(tooltipEl);
                        }
diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html
index 8be70c975c992c33f4d750823db3fce140d4910c..7b0680c973938cbf8ab7dd4ab1620f58924bfae5 100644 (file)
--- 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 @@
 <body>
        <div id="canvas-holder" style="width: 300px;">
                <canvas id="chart-area" width="300" height="300"></canvas>
-               <div id="chartjs-tooltip">
-                       <table></table>
-               </div>
        </div>
 
        <script>
+               var getOrCreateTooltip = function(chart) {
+                       var tooltipEl = chart.canvas.parentNode.querySelector('div');
+
+                       if (!tooltipEl) {
+                               tooltipEl = document.createElement('div');
+                               tooltipEl.classList.add('chartjs-tooltip');
+                               tooltipEl.innerHTML = '<table></table>';
+                               chart.canvas.parentNode.appendChild(tooltipEl);
+                       }
+
+                       return tooltipEl;
+               };
+
                Chart.defaults.plugins.tooltip.custom = function(context) {
                        // Tooltip Element
                        var tooltip = context.tooltip;
-                       var tooltipEl = document.getElementById('chartjs-tooltip');
+                       var tooltipEl = getOrCreateTooltip(context.chart);
 
                        // Hide if no tooltip
                        if (tooltip.opacity === 0) {
Mirror of https://github.com/chartjs/Chart.js.git