diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx index c64b6e74309dd..ec4acb787ecb2 100644 --- 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 ) && (
{ title &&
{ title }
} diff --git a/projects/js-packages/components/components/icon-tooltip/types.ts b/projects/js-packages/components/components/icon-tooltip/types.ts index 4e62cbdeeee3f..0a9cefea1d07e 100644 --- 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 index 669e34e548c97..384968d862bc1 100644 --- 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 ( - - - { message }{ ' ' } - { createInterpolateElement( - __( 'Please try again or contact support.', 'jetpack' ), - { - supportLink: ( - - ), - } - ) } - - + + + { message }{ ' ' } + { createInterpolateElement( + __( 'Please try again or contact support.', 'jetpack' ), + { + supportLink: ( + + ), + } + ) } + + +
); } 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 index e7ba45f4c7f96..26481cfe4ad95 100644 --- 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;