From 42b63cb2a0302defb4223ec6f0cdb7c6808e51f2 Mon Sep 17 00:00:00 2001
From: Adnan Haque <adnan007.id@gmail.com>
Date: Wed, 23 Oct 2024 15:51:35 +0300
Subject: [PATCH 1/2] Fix performance history tooltip

---
 .../boost-score-graph/style-tooltip.scss      | 15 ++++++++
 .../boost-score-graph/tooltips-plugin.ts      | 37 ++++++++-----------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss b/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss
index 31a7c3de5f539..34a39ef226872 100644
--- a/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss
+++ b/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss
@@ -5,6 +5,16 @@ $white: #ffffff;
 .jb-score-tooltips-container {
     width: 100%;
     position: relative;
+    pointer-events: none;
+
+}
+
+.jb-score-tooltip-react-root {
+    position: absolute;
+    bottom: -20px;
+    translate: -50% calc( 100% - 20px );
+    z-index: 1000;
+    pointer-events: auto;
 }
 
 .jb-score-tooltip {
@@ -17,6 +27,11 @@ $white: #ffffff;
     width: 20em;
     position: relative;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+    display: none;
+
+    .visible &, &:hover {
+        display: block;
+    }
 
     hr {
         border-top: 1px solid $grey;
diff --git a/projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts b/projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts
index c6dfb97d2e7e6..fd4d62886f1b3 100644
--- a/projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts
+++ b/projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts
@@ -25,35 +25,26 @@ export function tooltipsPlugin( periods ) {
 		if ( ! reactDom ) {
 			reactDom = ReactDOM.createRoot( reactRoot );
 		}
-		reactRoot.style.position = 'absolute';
-		reactRoot.style.bottom = -20 + 'px';
-		reactRoot.style.translate = '-50% calc( 100% - 20px )';
-		reactRoot.style.zIndex = '1000';
+		reactRoot.classList.add( 'jb-score-tooltip-react-root' );
 
 		container.appendChild( reactRoot );
 
 		u.over.appendChild( container );
 
-		/**
-		 * Hides all tooltips.
-		 */
-		function hideTips() {
-			reactRoot.style.display = 'none';
-		}
+		u.over.addEventListener( 'mouseenter', () => {
+			container.classList.add( 'visible' );
+		} );
 
-		/**
-		 * Shows all tooltips.
-		 */
-		function showTips() {
-			reactRoot.style.display = null;
-		}
+		u.over.addEventListener( 'mouseleave', () => {
+			container.classList.remove( 'visible' );
+		} );
 
-		container.addEventListener( 'mouseleave', () => {
-			hideTips();
+		reactRoot.addEventListener( 'mouseenter', () => {
+			reactRoot.classList.add( 'visible' );
 		} );
 
-		container.addEventListener( 'mouseenter', () => {
-			showTips();
+		reactRoot.addEventListener( 'mouseleave', () => {
+			reactRoot.classList.remove( 'visible' );
 		} );
 	}
 
@@ -62,7 +53,7 @@ export function tooltipsPlugin( periods ) {
 	 * @param {uPlot} u - The uPlot instance.
 	 */
 	function setSize( u: uPlot ) {
-		container.style.height = u.over.clientHeight + 'px';
+		container.style.paddingTop = u.over.clientHeight + 'px';
 	}
 
 	/**
@@ -75,6 +66,10 @@ export function tooltipsPlugin( periods ) {
 
 		const period = periods[ idx ];
 
+		if ( ! period ) {
+			return;
+		}
+
 		// Timestamp of the cursor position
 		const timestamp = u.data[ 0 ][ idx ];
 

From 2c6b5f9db2d7977f602676f37f61988a58abc645 Mon Sep 17 00:00:00 2001
From: Adnan Haque <adnan007.id@gmail.com>
Date: Wed, 23 Oct 2024 15:56:18 +0300
Subject: [PATCH 2/2] changelog

---
 .../components/changelog/fix-boost-score-history-tooltip      | 4 ++++
 .../plugins/boost/changelog/fix-boost-score-history-tooltip   | 4 ++++
 .../plugins/jetpack/changelog/fix-boost-score-history-tooltip | 4 ++++
 3 files changed, 12 insertions(+)
 create mode 100644 projects/js-packages/components/changelog/fix-boost-score-history-tooltip
 create mode 100644 projects/plugins/boost/changelog/fix-boost-score-history-tooltip
 create mode 100644 projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip

diff --git a/projects/js-packages/components/changelog/fix-boost-score-history-tooltip b/projects/js-packages/components/changelog/fix-boost-score-history-tooltip
new file mode 100644
index 0000000000000..0dfd586d5bbe6
--- /dev/null
+++ b/projects/js-packages/components/changelog/fix-boost-score-history-tooltip
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed tooltip behavior
diff --git a/projects/plugins/boost/changelog/fix-boost-score-history-tooltip b/projects/plugins/boost/changelog/fix-boost-score-history-tooltip
new file mode 100644
index 0000000000000..96f186bd9f3a4
--- /dev/null
+++ b/projects/plugins/boost/changelog/fix-boost-score-history-tooltip
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Performance History: Fixed tooltip behavior
diff --git a/projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip b/projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip
new file mode 100644
index 0000000000000..1ef8afea050a2
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+