From 6e3267315a2b3ad63d925dfca5ea7cb08cf1fa90 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 11 May 2022 10:51:32 +0200
Subject: [PATCH] Improved dashboard tooltip positioning

---
 .../app/components/dashboard/v5/charts/anchor.js   |  2 --
 .../dashboard/v5/charts/paid-breakdown.js          |  3 ++-
 .../app/components/dashboard/v5/charts/paid-mix.js | 14 ++++++++++----
 .../app/components/dashboard/v5/charts/paid-mrr.js | 12 +++++++++---
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.js b/ghost/admin/app/components/dashboard/v5/charts/anchor.js
index b1a4ed0f53..aadbdd6d1e 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js
+++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.js
@@ -275,13 +275,11 @@ export default class Anchor extends Component {
 
                     // only show tooltip when active
                     if (tooltip.opacity === 0) {
-                        tooltipEl.style.display = 'none';
                         tooltipEl.style.opacity = 0;
                         return; 
                     }
 
                     // update tooltip styles
-                    tooltipEl.style.display = 'block';
                     tooltipEl.style.opacity = 1;
                     tooltipEl.style.position = 'absolute';
 
diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
index 5ff945be97..fa99ffafcf 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
+++ b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
@@ -123,6 +123,7 @@ export default class PaidBreakdown extends Component {
                 custom: function (tooltip) {
                     // get tooltip element
                     const tooltipEl = document.getElementById('gh-dashboard5-breakdown-tooltip');
+                    const tooltipWidth = tooltipEl.offsetWidth;
 
                     // only show tooltip when active
                     if (tooltip.opacity === 0) {
@@ -135,7 +136,7 @@ export default class PaidBreakdown extends Component {
                     tooltipEl.style.display = 'block';
                     tooltipEl.style.opacity = 1;
                     tooltipEl.style.position = 'absolute';
-                    tooltipEl.style.left = tooltip.x + 'px';
+                    tooltipEl.style.left = tooltip.x - (tooltipWidth / 2) + 'px';
                     tooltipEl.style.top = '70px';    
                 },
                 callbacks: {
diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
index e9258e867a..93a79fb02a 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
+++ b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
@@ -164,20 +164,26 @@ export default class PaidMix extends Component {
                 custom: function (tooltip) {
                     // get tooltip element
                     const tooltipEl = document.getElementById('gh-dashboard5-mix-tooltip');
+                    const chartContainerEl = tooltipEl.parentElement;
+                    const chartWidth = chartContainerEl.offsetWidth;
+                    const tooltipWidth = tooltipEl.offsetWidth;
 
                     // only show tooltip when active
                     if (tooltip.opacity === 0) {
-                        tooltipEl.style.display = 'none';
                         tooltipEl.style.opacity = 0;
                         return; 
                     }
 
+                    let offsetX = 0;
+                    if (tooltip.x > chartWidth - tooltipWidth) {
+                        offsetX = tooltipWidth - 10;
+                    }
+
                     // update tooltip styles
-                    tooltipEl.style.display = 'block';
                     tooltipEl.style.opacity = 1;
                     tooltipEl.style.position = 'absolute';
-                    tooltipEl.style.left = tooltip.x + 'px';
-                    tooltipEl.style.top = tooltip.y + 'px';    
+                    tooltipEl.style.left = tooltip.x - offsetX + 'px';
+                    tooltipEl.style.top = '30px';    
                 },
                 callbacks: {
                     label: (tooltipItems, data) => {
diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js b/ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js
index f5d99d60b4..c07620a423 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js
+++ b/ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js
@@ -173,19 +173,25 @@ export default class PaidMrr extends Component {
                 custom: function (tooltip) {
                     // get tooltip element
                     const tooltipEl = document.getElementById('gh-dashboard5-mrr-tooltip');
+                    const chartContainerEl = tooltipEl.parentElement;
+                    const chartWidth = chartContainerEl.offsetWidth;
+                    const tooltipWidth = tooltipEl.offsetWidth;
 
                     // only show tooltip when active
                     if (tooltip.opacity === 0) {
-                        tooltipEl.style.display = 'none';
                         tooltipEl.style.opacity = 0;
                         return; 
                     }
 
+                    let offsetX = 0;
+                    if (tooltip.x > chartWidth - tooltipWidth) {
+                        offsetX = tooltipWidth - 10;
+                    }
+
                     // update tooltip styles
-                    tooltipEl.style.display = 'block';
                     tooltipEl.style.opacity = 1;
                     tooltipEl.style.position = 'absolute';
-                    tooltipEl.style.left = tooltip.x + 'px';
+                    tooltipEl.style.left = tooltip.x - offsetX + 'px';
                     tooltipEl.style.top = tooltip.y + 'px';    
                 },
                 callbacks: {