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) => {