Components: Add optional hover support to the IconTooltip component (#…

…39916)

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.

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 } />

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,
+};

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.
 	 */