From 2954110488010eb43297327195a1beed9be27784 Mon Sep 17 00:00:00 2001 From: ellie Date: Thu, 16 Mar 2017 14:27:49 -0700 Subject: [PATCH 1/5] Update line-customTooltips.html Add window scroll position to tooltip position calculation so they show up in the intended place instead of potentially off-screen! --- samples/tooltips/custom-line.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html index 97f543b2653..4a7c001925c 100644 --- a/samples/tooltips/custom-line.html +++ b/samples/tooltips/custom-line.html @@ -99,8 +99,8 @@ // 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 = position.left + tooltip.caretX + window.pageXOffset + 'px'; + tooltipEl.style.top = position.top + tooltip.caretY + window.pageYOffset + 'px'; tooltipEl.style.fontFamily = tooltip._fontFamily; tooltipEl.style.fontSize = tooltip.fontSize; tooltipEl.style.fontStyle = tooltip._fontStyle; From 285f9119f5b7470e6f8908e5416920519bea428a Mon Sep 17 00:00:00 2001 From: ellie Date: Fri, 17 Mar 2017 16:04:45 -0700 Subject: [PATCH 2/5] add tooltip to chart parent and use offsetTop offsetLeft instead of getBoundingRect --- samples/tooltips/custom-line.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html index 4a7c001925c..f15aeab9161 100644 --- 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 = "
" - 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 + window.pageXOffset + 'px'; - tooltipEl.style.top = position.top + tooltip.caretY + window.pageYOffset + '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; From c81991ea48cd77063997e9f092483190940b65be Mon Sep 17 00:00:00 2001 From: ellie Date: Fri, 17 Mar 2017 16:13:36 -0700 Subject: [PATCH 3/5] spaces to tabs --- samples/tooltips/custom-line.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html index f15aeab9161..801b12df680 100644 --- 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 = "
" - this._chart.canvas.parentNode.appendChild(tooltipEl); + this._chart.canvas.parentNode.appendChild(tooltipEl); } // Hide if no tooltip @@ -96,7 +96,7 @@ } var positionY = this._chart.canvas.offsetTop; - var positionX = this._chart.canvas.offsetLeft; + var positionX = this._chart.canvas.offsetLeft; // Display, position, and set styles for font tooltipEl.style.opacity = 1; From 2ed082333b082396d0d8d1091fb6ad342fd96d78 Mon Sep 17 00:00:00 2001 From: Ellie Date: Tue, 21 Mar 2017 12:09:25 -0700 Subject: [PATCH 4/5] fix tooltip location for pie and points chart samples to take chart offest into account --- samples/tooltips/custom-pie.html | 7 ++++--- samples/tooltips/custom-points.html | 7 +++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html index 4eedd6a3a7a..0d1b0a481d1 100644 --- a/samples/tooltips/custom-pie.html +++ b/samples/tooltips/custom-pie.html @@ -92,12 +92,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 b9e98167584..fddc4f2766b 100644 --- a/samples/tooltips/custom-points.html +++ b/samples/tooltips/custom-points.html @@ -44,6 +44,9 @@ 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", }); }); } From e71fc85eeba1bdf8c9c442605b1d9a5ae83d8e72 Mon Sep 17 00:00:00 2001 From: Ellie Date: Tue, 21 Mar 2017 14:30:08 -0700 Subject: [PATCH 5/5] move tooltips inside the canvas parent container since they are being positioned in terms of its location --- samples/tooltips/custom-pie.html | 9 ++++----- samples/tooltips/custom-points.html | 4 ++-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html index 0d1b0a481d1..9c3cd0aa608 100644 --- a/samples/tooltips/custom-pie.html +++ b/samples/tooltips/custom-pie.html @@ -36,11 +36,10 @@
- -
- -
-
+ +
+
+