Add hover effect

Automattic · Oct 22, 2024 · 87761d6 · 87761d6
1 parent 998dcb7
commit 87761d6
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 22 deletions.
diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -41,6 +41,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	wide = false,
 	inline = true,
 	shift = false,
+	hoverEnabled = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -89,7 +90,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 				className={ clsx( 'icon-tooltip-helper', { 'is-wide': wide } ) }
 				style={ iconShiftBySize }
 			>
-				{ ( isForcedToShow || isVisible ) && (
+				{ ( isForcedToShow || isVisible || hoverEnabled ) && (
 					<Popover { ...args }>
 						<div>
 							{ title && <div className="icon-tooltip-title">{ title }</div> }

diff --git a/projects/js-packages/components/components/icon-tooltip/types.ts b/projects/js-packages/components/components/icon-tooltip/types.ts
@@ -83,4 +83,9 @@ export type IconTooltipProps = {
 	 * Enables the Popover to shift in order to stay in view when meeting the viewport edges.
 	 */
 	shift?: boolean;
+
+	/**
+	 * Enables the Popover to show on hover.
+	 */
+	hoverEnabled?: boolean;
 };
diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -4,6 +4,7 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { check } from '@wordpress/icons';
+import React, { useState, useCallback } from 'react';
 import IconTooltip from '../icon-tooltip';
 import Text from '../text';
 import { PAID_PLUGIN_SUPPORT_URL } from './constants';
@@ -127,27 +128,60 @@ export function InfoIconTooltip( {
 	message?: string;
 	size?: number;
 } ): JSX.Element {
+	const [ showPopover, setShowPopover ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState( null );
+
+	const handleEnter = useCallback( () => {
+		// Clear any existing timeout if user hovers back quickly
+		if ( timeoutId ) {
+			clearTimeout( timeoutId );
+			setTimeoutId( null );
+		}
+		setShowPopover( true );
+	}, [ timeoutId ] );
+
+	const handleOut = useCallback( () => {
+		// Set a timeout to delay the hiding of the popover
+		const id = setTimeout( () => {
+			setShowPopover( false );
+			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
+		}, 100 );
+
+		setTimeoutId( id );
+	}, [] );
+
 	return (
-		<IconTooltip
-			placement={ 'top' }
-			className={ styles[ 'icon-tooltip__container' ] }
-			iconClassName={ styles[ 'icon-tooltip__icon' ] }
-			iconSize={ size }
+		<div
+			className={ styles[ 'icon-tooltip' ] }
+			onMouseLeave={ handleOut }
+			onMouseEnter={ handleEnter }
+			onClick={ handleEnter }
+			onFocus={ handleEnter }
+			onBlur={ handleOut }
+			role="presentation"
 		>
-			<Text variant={ 'body-small' }>
-				{ message }{ ' ' }
-				{ createInterpolateElement(
-					__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
-					{
-						supportLink: (
-							<ExternalLink
-								className={ styles[ 'support-link' ] }
-								href={ PAID_PLUGIN_SUPPORT_URL }
-							/>
-						),
-					}
-				) }
-			</Text>
-		</IconTooltip>
+			<IconTooltip
+				placement={ 'top' }
+				className={ styles[ 'icon-tooltip__container' ] }
+				iconClassName={ styles[ 'icon-tooltip__icon' ] }
+				iconSize={ size }
+				hoverEnabled={ showPopover }
+			>
+				<Text variant={ 'body-small' }>
+					{ message }{ ' ' }
+					{ createInterpolateElement(
+						__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
+						{
+							supportLink: (
+								<ExternalLink
+									className={ styles[ 'support-link' ] }
+									href={ PAID_PLUGIN_SUPPORT_URL }
+								/>
+							),
+						}
+					) }
+				</Text>
+			</IconTooltip>
+		</div>
 	);
 }
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -114,10 +114,12 @@
 
 .threat__fixer {
 	min-width: 54px;
-	text-align: center;
+	display: flex;
+	justify-content: center;
 }
 
 .icon-tooltip {
+	width: fit-content;
 
 	&__container {
 		text-align: left;