Add show on hover to info popover (#48990)

* Add show on hover cap. to info popover

* Bump CI

* Bump CI #2

* Change popover timeout to 250ms

* Bump CI #3

* Bump CI #4

* Bump CI #5

client/components/info-popover/docs/example.jsx

@@ -40,6 +40,14 @@ class InfoPopoverExample extends React.PureComponent {
 				<InfoPopover id="popover__info-popover-example" position={ this.state.popoverPosition }>
 					Some informational text.
 				</InfoPopover>
+
+				<InfoPopover
+					id="popover__info-popover-example"
+					position={ this.state.popoverPosition }
+					showOnHover={ true }
+				>
+					Shows on hover.
+				</InfoPopover>
 			</div>
 		);
 	}

client/components/info-popover/index.jsx

@@ -42,31 +42,40 @@ export default class InfoPopover extends Component {
 			'left',
 			'top left',
 		] ),
+		showOnHover: PropTypes.bool,
 	};
 
 	static defaultProps = {
 		autoRtl: true,
 		icon: 'info-outline',
 		iconSize: 18,
 		position: 'bottom',
+		showOnHover: false,
 	};
 
 	iconRef = React.createRef();
 
 	state = { showPopover: false };
 
 	handleClick = ( e ) => {
+		const { onOpen, showOnHover } = this.props;
+		const { showPopover } = this.state;
+
 		e.preventDefault();
 		e.stopPropagation();
 
+		if ( showOnHover ) {
+			return;
+		}
+
 		// There's no "handleOpen" method for us to hook into,
 		// so we check here to see if the intent is to open the popover
 		// and fire onOpen accordingly
-		if ( ! this.state.showPopover ) {
-			this.props.onOpen?.();
+		if ( ! showPopover ) {
+			onOpen?.();
 		}
 
-		this.setState( { showPopover: ! this.state.showPopover }, this.recordStats );
+		this.setState( { showPopover: ! showPopover }, this.recordStats );
 	};
 
 	handleClose = () => {
@@ -83,6 +92,42 @@ export default class InfoPopover extends Component {
 		}
 	};
 
+	handleOnMouseEnterButton = () => {
+		const { onOpen, showOnHover } = this.props;
+
+		if ( ! showOnHover ) {
+			return;
+		}
+
+		onOpen?.();
+		this.setState( { showPopover: true }, this.recordStats );
+	};
+
+	handleOnMouseLeave = () => {
+		setTimeout( () => {
+			const { showOnHover } = this.props;
+
+			if ( ! showOnHover ) {
+				return;
+			}
+
+			if ( this.inPopover ) {
+				return;
+			}
+
+			this.setState( { showPopover: false }, this.recordStats );
+		}, 250 );
+	};
+
+	handleOnMouseEnterPopover = () => {
+		this.inPopover = true;
+	};
+
+	handleOnMouseLeavePopover = () => {
+		this.inPopover = false;
+		this.handleOnMouseLeave();
+	};
+
 	render() {
 		return (
 			<Fragment>
@@ -92,6 +137,8 @@ export default class InfoPopover extends Component {
 					aria-expanded={ this.state.showPopover }
 					aria-label={ translate( 'More information' ) }
 					onClick={ this.handleClick }
+					onMouseEnter={ this.handleOnMouseEnterButton }
+					onMouseLeave={ this.handleOnMouseLeave }
 					ref={ this.iconRef }
 					className={ classNames( 'info-popover', this.props.className, {
 						'is-active': this.state.showPopover,
@@ -109,6 +156,8 @@ export default class InfoPopover extends Component {
 						position={ this.props.position }
 						onClose={ this.handleClose }
 						className={ classNames( 'info-popover__tooltip', this.props.className ) }
+						onMouseEnter={ this.handleOnMouseEnterPopover }
+						onMouseLeave={ this.handleOnMouseLeavePopover }
 					>
 						{ this.props.children }
 					</Popover>

client/components/popover/index.jsx

@@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import ReactDom from 'react-dom';
 import debugFactory from 'debug';
 import classNames from 'classnames';
-import { defer, noop } from 'lodash';
+import { defer } from 'lodash';
 import { useRtl } from 'i18n-calypso';
 
 /**
@@ -31,6 +31,8 @@ import './style.scss';
  */
 const debug = debugFactory( 'calypso:popover' );
 
+const noop = () => {};
+
 class PopoverInner extends Component {
 	static defaultProps = {
 		autoPosition: true,
@@ -41,6 +43,8 @@ class PopoverInner extends Component {
 		isFocusEnabled: true,
 		position: 'top',
 		onClose: noop,
+		onMouseEnter: noop,
+		onMouseLeave: noop,
 	};
 
 	/**
@@ -325,6 +329,18 @@ class PopoverInner extends Component {
 		this.props.onClose( wasCanceled );
 	}
 
+	handleOnMouseEnter = () => {
+		const { onMouseEnter } = this.props;
+
+		onMouseEnter?.();
+	};
+
+	handleOnMouseLeave = () => {
+		const { onMouseLeave } = this.props;
+
+		onMouseLeave?.();
+	};
+
 	render() {
 		if ( ! this.props.context ) {
 			debug( 'No `context` to tie. return no render' );
@@ -342,6 +358,8 @@ class PopoverInner extends Component {
 				tabIndex="-1"
 				style={ this.getStylePosition() }
 				className={ classes }
+				onMouseEnter={ this.handleOnMouseEnter }
+				onMouseLeave={ this.handleOnMouseLeave }
 			>
 				<div className="popover__arrow" />
 				<div ref={ this.popoverInnerNodeRef } className="popover__inner">

client/my-sites/sidebar/index.jsx

@@ -712,7 +712,11 @@ export class MySitesSidebar extends Component {
 				className="sidebar__store"
 			>
 				{ isCalypsoStoreDeprecated && isBusiness( site.plan ) && (
-					<InfoPopover className="sidebar__store-tooltip" position="bottom right">
+					<InfoPopover
+						className="sidebar__store-tooltip"
+						position="bottom right"
+						showOnHover={ true }
+					>
 						{ infoCopy }
 					</InfoPopover>
 				) }