From ce81b9c342e882750868a59443164a12572942cc Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 11 May 2022 10:30:15 +0200 Subject: [PATCH] Fixed total charts tooltip offset --- .../app/components/dashboard/v5/charts/anchor.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.js b/ghost/admin/app/components/dashboard/v5/charts/anchor.js index 92ae56f472..b1a4ed0f53 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.js @@ -269,6 +269,9 @@ export default class Anchor extends Component { custom: function (tooltip) { // get tooltip element const tooltipEl = document.getElementById('gh-dashboard5-anchor-tooltip'); + const chartContainerEl = tooltipEl.parentElement; + const chartWidth = chartContainerEl.offsetWidth; + const tooltipWidth = tooltipEl.offsetWidth; // only show tooltip when active if (tooltip.opacity === 0) { @@ -281,8 +284,14 @@ export default class Anchor extends Component { tooltipEl.style.display = 'block'; tooltipEl.style.opacity = 1; tooltipEl.style.position = 'absolute'; - tooltipEl.style.left = tooltip.x + 'px'; - tooltipEl.style.top = tooltip.y + 'px'; + + let offsetX = 0; + if (tooltip.x > chartWidth - tooltipWidth) { + offsetX = tooltipWidth - 10; + } + + tooltipEl.style.left = tooltip.x - offsetX + 'px'; + tooltipEl.style.top = tooltip.y + 'px'; }, callbacks: { label: (tooltipItems, data) => {