From: ellie Date: Wed, 22 Mar 2017 10:35:50 +0000 (-0700) Subject: Update line-customTooltips.html (Re issue #4038 ) X-Git-Tag: v2.6.0~2^2~36 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c96ad6694559f7f280c4727d1f5e52a296d933a2;p=thirdparty%2FChart.js.git Update line-customTooltips.html (Re issue #4038 ) 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 --- diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html index 97f543b26..801b12df6 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 + '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 4eedd6a3a..9c3cd0aa6 100644 --- a/samples/tooltips/custom-pie.html +++ b/samples/tooltips/custom-pie.html @@ -36,11 +36,10 @@
- -
- -
-
+ +
+
+