Fixes showing of tooltip on AI buttons

css/src/tooltips.css

@@ -72,7 +72,6 @@ button.yoast-tooltip {
 	animation-name: yoast-tooltip-appear;
 	animation-duration: 0.1s;
 	animation-timing-function: ease-in;
-	animation-delay: 0.4s;
 
 	animation-fill-mode: forwards;
 }

packages/components/src/AIFixesButton.js

@@ -23,9 +23,7 @@ const gradientEffect = {
 
 const AIFixesButtonBase = styled( IconButtonBase )`
 	overflow: hidden;
-	border: ${ props => props.pressed ? "none" : "1px solid transparent" };
-	border-image: ${ props => props.pressed ? "none" : gradientEffect.defaultStateBorder };
-	clip-path: inset(0 round 3px);
+	border: ${ props => props.pressed ? "none" : "1px solid #A5B4FC" }; /*indigo-300*/
 	background-image: ${ props => props.pressed
 		? gradientEffect.pressedStateBackground
 		: gradientEffect.defaultStateBackground } !important;

packages/components/src/IconAIFixesButton.js

@@ -21,6 +21,8 @@ const IconAIFixesButton = function( props ) {
 			type="button"
 			onClick={ props.onClick }
 			pressed={ props.pressed }
+			onMouseEnter={ props.onMouseEnter }
+			onMouseLeave={ props.onMouseLeave }
 			unpressedBoxShadowColor={ props.unpressedBoxShadowColor }
 			pressedBoxShadowColor={ props.pressedBoxShadowColor }
 			pressedBackground={ props.pressedBackground }
@@ -29,8 +31,6 @@ const IconAIFixesButton = function( props ) {
 			aria-label={ props.ariaLabel }
 			aria-pressed={ props.pressed }
 			pressedIconColor={ props.pressedIconColor }
-			hoverBackgroundColor={ props.hoverBackgroundColor }
-			unpressedBorderColor={ props.unpressedBorderColor }
 			className={ props.className }
 		>
 			{ props.children }
@@ -44,14 +44,14 @@ IconAIFixesButton.propTypes = {
 	id: PropTypes.string.isRequired,
 	ariaLabel: PropTypes.string.isRequired,
 	onClick: PropTypes.func,
+	onMouseEnter: PropTypes.func,
+	onMouseLeave: PropTypes.func,
 	unpressedBoxShadowColor: PropTypes.string,
 	pressedBoxShadowColor: PropTypes.string,
 	pressedBackground: PropTypes.string,
 	unpressedBackground: PropTypes.string,
 	pressedIconColor: PropTypes.string,
 	pressed: PropTypes.bool.isRequired,
-	unpressedBorderColor: PropTypes.string,
-	hoverBackgroundColor: PropTypes.string,
 	className: PropTypes.string,
 };
 
@@ -62,8 +62,9 @@ IconAIFixesButton.defaultProps = {
 	pressedBackground: "linear- gradient(to bottom right, #A61E69, #3B82F6)",
 	unpressedBackground: "linear-gradient(to bottom right, #FAF3F7, #EFF6FF)",
 	pressedIconColor: colors.$color_white,
-	unpressedBorderColor: "linear-gradient(to bottom right, #CD82AB, #93C5FD)",
-	hoverBackgroundColor: "linear-gradient(to bottom right, #F3E5ED, #DBEAFE)",
+	onClick: () => {},
+	onMouseEnter: () => {},
+	onMouseLeave: () => {},
 };
 
 export default IconAIFixesButton;

packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap

@@ -35,9 +35,6 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
 .c1 {
   overflow: hidden;
   border: none;
-  border-image: none;
-  -webkit-clip-path: inset(0 round 3px);
-  clip-path: inset(0 round 3px);
   background-image: linear-gradient(to bottom right,#A61E69,#3B82F6) !important;
   box-shadow: inset 0 -2px 0 #B94986;
 }
@@ -53,6 +50,8 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
   disabled={false}
   id="keyphraseInIntroductionAIFixes"
   onClick={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   type="button"
 />
 `;
@@ -91,10 +90,7 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
 
 .c1 {
   overflow: hidden;
-  border: 1px solid transparent;
-  border-image: linear-gradient(to bottom right,#CD82AB,#93C5FD) 1;
-  -webkit-clip-path: inset(0 round 3px);
-  clip-path: inset(0 round 3px);
+  border: 1px solid #A5B4FC;
   background-image: linear-gradient(to bottom right,#FAF3F7,#EFF6FF) !important;
   box-shadow: 0 1px 0 rgba( 204,204,204,0.7 );
 }
@@ -110,6 +106,8 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
   disabled={true}
   id="keyphraseDensityAIFixes"
   onClick={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   type="button"
 />
 `;

packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { __ } from "@wordpress/i18n";
-import { useCallback, useRef } from "@wordpress/element";
+import { useCallback, useRef, useState } from "@wordpress/element";
 import { doAction } from "@wordpress/hooks";
 import { useSelect, useDispatch } from "@wordpress/data";
 
@@ -23,12 +23,13 @@ import { SparklesIcon } from "./sparkles-icon";
  */
 const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 	const aiFixesId = id + "AIFixes";
-	const ariaLabel = __( "Fix with AI", "wordpress-seo" );
+	const ariaLabel = __( "Optimize with AI", "wordpress-seo" );
 	const [ isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse ] = useToggleState( false );
 	const activeAIButtonId = useSelect( select => select( "yoast-seo/editor" ).getActiveAIFixesButton(), [] );
 	const activeMarker = useSelect( select => select( "yoast-seo/editor" ).getActiveMarker(), [] );
 	const { setActiveAIFixesButton, setActiveMarker, setMarkerPauseStatus } = useDispatch( "yoast-seo/editor" );
 	const focusElementRef = useRef( null );
+	const [ buttonClass, setButtonClass ] = useState( "" );
 
 	/**
 	 * Handles the button press state.
@@ -50,6 +51,9 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 		} else {
 			setActiveAIFixesButton( aiFixesId );
 		}
+
+		// Dismiss the tooltip when the button is pressed.
+		setButtonClass( "" );
 	};
 
 	const handleClick = useCallback( () => {
@@ -67,16 +71,26 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 	// The button is pressed when the active AI button id is the same as the current button id.
 	const isButtonPressed = activeAIButtonId === aiFixesId;
 
-	// Don't show the tooltip when the button is pressed.
-	const className = isButtonPressed ? "" : "yoast-tooltip yoast-tooltip-w";
+	// Add tooltip classes on mouse enter and remove them on mouse leave.
+	const handleMouseEnter = useCallback( () => {
+		// Add tooltip classes on mouse enter
+		setButtonClass( "yoast-tooltip yoast-tooltip-w" );
+	}, [] );
+
+	const handleMouseLeave = useCallback( () => {
+		// Remove tooltip classes on mouse leave
+		setButtonClass( "" );
+	}, [] );
 
 	return (
 		<>
 			<IconAIFixesButton
 				onClick={ handleClick }
 				ariaLabel={ ariaLabel }
+				onMouseEnter={ handleMouseEnter }
+				onMouseLeave={ handleMouseLeave }
 				id={ aiFixesId }
-				className={ className }
+				className={ `ai-button ${buttonClass}` }
 				pressed={ isButtonPressed }
 			>
 				<SparklesIcon pressed={ isButtonPressed } />

packages/js/tests/ai-assessment-fixes/components/AIAssessmentFixesButton.test.js

@@ -29,7 +29,7 @@ describe( "AIAssessmentFixesButton", () => {
 	test( "should find the correct aria-label in the document", () => {
 		render( <AIAssessmentFixesButton id="keyphraseDensity" isPremium={ false } /> );
 
-		const labelText = document.querySelector( 'button[aria-label="Fix with AI"]' );
+		const labelText = document.querySelector( 'button[aria-label="Optimize with AI"]' );
 		expect( labelText ).toBeInTheDocument();
 	} );
 
@@ -39,11 +39,11 @@ describe( "AIAssessmentFixesButton", () => {
 		expect( button ).toBeInTheDocument();
 	} );
 
-	test( "should find the button with tooltip when the button is NOT pressed", () => {
+	test( "should find the button without tooltip when the button is NOT hovered", () => {
 		render( <AIAssessmentFixesButton id="keyphraseDensity" isPremium={ true }  /> );
 
-		const buttonWithTooltip = document.getElementsByClassName( "yoast-tooltip yoast-tooltip-w" );
-		expect( buttonWithTooltip ).toHaveLength( 1 );
+		const buttonWithOutTooltip = document.getElementsByClassName( "ai-button" );
+		expect( buttonWithOutTooltip ).toHaveLength( 1 );
 	} );
 
 	test( "should find the button without tooltip when the button is pressed", () => {