From 449cd078f43e97a018fd9385207abc7eaa37050a Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Wed, 6 Nov 2024 09:50:41 -0700
Subject: [PATCH] Components: Add optional hover support to the IconTooltip
 component (#39916)

---
 .../changelog/icon-tooltip-add-hover-support  |  4 +++
 .../components/icon-tooltip/index.tsx         | 29 ++++++++++++++++++-
 .../icon-tooltip/stories/index.stories.tsx    | 11 +++++++
 .../components/icon-tooltip/types.ts          |  5 ++++
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 projects/js-packages/components/changelog/icon-tooltip-add-hover-support

diff --git a/projects/js-packages/components/changelog/icon-tooltip-add-hover-support b/projects/js-packages/components/changelog/icon-tooltip-add-hover-support
new file mode 100644
index 0000000000000..581190cf8e745
--- /dev/null
+++ b/projects/js-packages/components/changelog/icon-tooltip-add-hover-support
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+IconTooltip: add support for showing tooltip on hover.
diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
index c64b6e74309dd..9e70380a248ae 100644
--- a/projects/js-packages/components/components/icon-tooltip/index.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -38,12 +38,14 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	children,
 	popoverAnchorStyle = 'icon',
 	forceShow = false,
+	hoverShow = false,
 	wide = false,
 	inline = true,
 	shift = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
+	const [ hoverTimeout, setHoverTimeout ] = useState( null );
 	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
 	const toggleTooltip = useCallback(
 		e => {
@@ -78,8 +80,33 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 
 	const isForcedToShow = isAnchorWrapper && forceShow;
 
+	const handleMouseEnter = useCallback( () => {
+		if ( hoverShow ) {
+			if ( hoverTimeout ) {
+				clearTimeout( hoverTimeout );
+				setHoverTimeout( null );
+			}
+			setIsVisible( true );
+		}
+	}, [ hoverShow, hoverTimeout ] );
+
+	const handleMouseLeave = useCallback( () => {
+		if ( hoverShow ) {
+			const id = setTimeout( () => {
+				setIsVisible( false );
+				setHoverTimeout( null );
+			}, 100 );
+			setHoverTimeout( id );
+		}
+	}, [ hoverShow ] );
+
 	return (
-		<div className={ wrapperClassNames } data-testid="icon-tooltip_wrapper">
+		<div
+			className={ wrapperClassNames }
+			data-testid="icon-tooltip_wrapper"
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+		>
 			{ ! isAnchorWrapper && (
 				<Button variant="link" onMouseDown={ toggleTooltip }>
 					<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
diff --git a/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx b/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
index c18acaafb6e21..d42b0a7644782 100644
--- a/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
@@ -46,6 +46,9 @@ export default {
 		wide: {
 			control: { type: 'boolean' },
 		},
+		hoverShow: {
+			control: { type: 'boolean' },
+		},
 	},
 };
 
@@ -106,3 +109,11 @@ Wide.args = {
 	wide: true,
 	placement: 'bottom-start',
 };
+
+export const HoverShow = Template.bind( {} );
+HoverShow.args = {
+	title: 'This is title!',
+	children: <div>This is a hover tooltip!</div>,
+	placement: 'bottom-start',
+	hoverShow: true,
+};
diff --git a/projects/js-packages/components/components/icon-tooltip/types.ts b/projects/js-packages/components/components/icon-tooltip/types.ts
index 4e62cbdeeee3f..f546d96117556 100644
--- a/projects/js-packages/components/components/icon-tooltip/types.ts
+++ b/projects/js-packages/components/components/icon-tooltip/types.ts
@@ -69,6 +69,11 @@ export type IconTooltipProps = {
 	 */
 	forceShow?: boolean;
 
+	/**
+	 * Enables the Popover to show on hover.
+	 */
+	hoverShow?: boolean;
+
 	/**
 	 * Uses a wider content area when enabled.
 	 */