Boost: Fix performance history tooltip

projects/js-packages/components/changelog/fix-boost-score-history-tooltip

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed tooltip behavior

projects/js-packages/components/components/boost-score-graph/style-tooltip.scss

@@ -5,6 +5,17 @@ $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;
+    user-select: text;
 }
 
 .jb-score-tooltip {
@@ -17,6 +28,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;

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 ];
 

projects/plugins/boost/changelog/fix-boost-score-history-tooltip

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Performance History: Fixed tooltip behavior

projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+