]> 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: 20a8328)
Update line-customTooltips.html (Re issue #4038 )
authorellie <ellie.harmon@gmail.com>
Wed, 22 Mar 2017 10:35:50 +0000 (03:35 -0700)
committerEvert Timberg <evert.timberg+github@gmail.com>
Wed, 22 Mar 2017 10:35:50 +0000 (06:35 -0400)
Add window scroll position to tooltip position calculation so they show up in the intended place instead of potentially off-screen! Moved tooltips inside the canvas parent container since they are being positioned in terms of its location

samples/tooltips/custom-line.html patch | blob | blame | history
samples/tooltips/custom-pie.html patch | blob | blame | history
samples/tooltips/custom-points.html patch | blob | blame | history

diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html
index 97f543b2653ae6365738f74663df10df42240ab9..801b12df6807ec8576229f90a479803251325ed0 100644 (file)
--- a/samples/tooltips/custom-line.html
+++ b/samples/tooltips/custom-line.html
@@ -48,7 +48,7 @@
                                tooltipEl = document.createElement('div');
                                tooltipEl.id = 'chartjs-tooltip';
                                tooltipEl.innerHTML = "<table></table>"
-                               document.body.appendChild(tooltipEl);
+                               this._chart.canvas.parentNode.appendChild(tooltipEl);
                        }
 
                        // Hide if no tooltip
@@ -95,12 +95,13 @@
                                tableRoot.innerHTML = innerHtml;
                        }
 
-                       var position = this._chart.canvas.getBoundingClientRect();
+                       var positionY = this._chart.canvas.offsetTop;
+                       var positionX = this._chart.canvas.offsetLeft;
 
                        // Display, position, and set styles for font
                        tooltipEl.style.opacity = 1;
-                       tooltipEl.style.left = position.left + tooltip.caretX + 'px';
-                       tooltipEl.style.top = position.top + tooltip.caretY + 'px';
+                       tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+                       tooltipEl.style.top = positionY + tooltip.caretY + 'px';
                        tooltipEl.style.fontFamily = tooltip._fontFamily;
                        tooltipEl.style.fontSize = tooltip.fontSize;
                        tooltipEl.style.fontStyle = tooltip._fontStyle;
diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html
index 4eedd6a3a7ab5b31ff0d21a5a1bce11a3b864cca..9c3cd0aa6089982aa9ad277f63af1f3f5e16b88e 100644 (file)
--- a/samples/tooltips/custom-pie.html
+++ b/samples/tooltips/custom-pie.html
@@ -36,11 +36,10 @@
 
 <body>
        <div id="canvas-holder" style="width: 300px;">
-               <canvas id="chart-area" width="300" height="300" />
-       </div>
-
-       <div id="chartjs-tooltip">
-               <table></table>
+               <canvas id="chart-area" width="300" height="300"></canvas>
+               <div id="chartjs-tooltip">
+                       <table></table>
+               </div>
        </div>
 
        <script>
@@ -92,12 +91,13 @@
                        tableRoot.innerHTML = innerHtml;
                }
 
-               var position = this._chart.canvas.getBoundingClientRect();
+               var positionY = this._chart.canvas.offsetTop;
+               var positionX = this._chart.canvas.offsetLeft;
 
                // Display, position, and set styles for font
                tooltipEl.style.opacity = 1;
-               tooltipEl.style.left = position.left + tooltip.caretX + 'px';
-               tooltipEl.style.top = position.top + tooltip.caretY + 'px';
+               tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+               tooltipEl.style.top = positionY + tooltip.caretY + 'px';
                tooltipEl.style.fontFamily = tooltip._fontFamily;
                tooltipEl.style.fontSize = tooltip.fontSize;
                tooltipEl.style.fontStyle = tooltip._fontStyle;
diff --git a/samples/tooltips/custom-points.html b/samples/tooltips/custom-points.html
index b9e9816758442a1304cb572ddc52cc7553c327b4..7d994604263bcf652ce8bec1a2536ad077602373 100644 (file)
--- a/samples/tooltips/custom-points.html
+++ b/samples/tooltips/custom-points.html
@@ -37,13 +37,16 @@
 <body>
        <div id="canvas-holder1" style="width:75%;">
                <canvas id="chart1"></canvas>
+               <div class="chartjs-tooltip" id="tooltip-0"></div>
+               <div class="chartjs-tooltip" id="tooltip-1"></div>
        </div>
-       <div class="chartjs-tooltip" id="tooltip-0"></div>
-       <div class="chartjs-tooltip" id="tooltip-1"></div>
        <script>
                var customTooltips = function (tooltip) {
                        $(this._chart.canvas).css("cursor", "pointer");
 
+                       var positionY = this._chart.canvas.offsetTop;
+                       var positionX = this._chart.canvas.offsetLeft;
+
                        $(".chartjs-tooltip").css({
                                opacity: 0,
                        });
@@ -60,8 +63,8 @@
                                        $tooltip.html(content);
                                        $tooltip.css({
                                                opacity: 1,
-                                               top: dataPoint.y + "px",
-                                               left: dataPoint.x + "px",
+                                               top: positionY + dataPoint.y + "px",
+                                               left: positionX + dataPoint.x + "px",
                                        });
                                });
                        }
Mirror of https://github.com/chartjs/Chart.js.git