Popover and Tooltip improvements (#788)

* Popover and Tooltip hover behaviour

* Format source

* Ensure legacy trigger updates props

* Update docstring

Author: tcbegley

src/components/popover/Popover.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import PopoverTemplate from '../../private/PopoverTemplate';
+import {PopoverTemplate} from '../../private/OverlayTemplates';
 import Overlay from '../../private/Overlay';
 
 /**
@@ -72,7 +72,8 @@ const Popover = props => {
 Popover.defaultProps = {
   delay: {show: 0, hide: 50},
   placement: 'right',
-  flip: true
+  flip: true,
+  autohide: false
 };
 
 Popover.propTypes = {
@@ -208,6 +209,11 @@ Popover.propTypes = {
    */
   body: PropTypes.bool,
 
+  /**
+   * Optionally hide popover when hovering over content - default False.
+   */
+  autohide: PropTypes.bool,
+
   /**
    * Object that holds the loading state object coming from dash-renderer
    */

src/components/tooltip/Tooltip.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import RBTooltip from 'react-bootstrap/Tooltip';
 
+import {TooltipTemplate} from '../../private/OverlayTemplates';
 import Overlay from '../../private/Overlay';
 
 /**
@@ -31,17 +31,22 @@ const Tooltip = props => {
       {...omit(['setProps'], otherProps)}
       trigger="hover focus"
     >
-      <RBTooltip style={style} className={class_name || className}>
+      <TooltipTemplate
+        id={id}
+        style={style}
+        className={class_name || className}
+      >
         {children}
-      </RBTooltip>
+      </TooltipTemplate>
     </Overlay>
   );
 };
 
 Tooltip.defaultProps = {
   delay: {show: 0, hide: 50},
   placement: 'auto',
-  flip: true
+  flip: true,
+  autohide: true
 };
 
 Tooltip.propTypes = {
@@ -118,6 +123,11 @@ Tooltip.propTypes = {
    */
   delay: PropTypes.shape({show: PropTypes.number, hide: PropTypes.number}),
 
+  /**
+   * Optionally hide tooltip when hovering over tooltip content - default True.
+   */
+  autohide: PropTypes.bool,
+
   /**
    * Object that holds the loading state object coming from dash-renderer
    */

src/private/Overlay.js

@@ -1,6 +1,8 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {createContext, useEffect, useRef, useState} from 'react';
 import RBOverlay from 'react-bootstrap/Overlay';
 
+const OverlayContext = createContext({});
+
 function isInDOMSubtree(element, subtreeRoot) {
   return (
     subtreeRoot && (element === subtreeRoot || subtreeRoot.contains(element))
@@ -37,6 +39,7 @@ const Overlay = ({
   trigger,
   defaultShow,
   setProps,
+  autohide,
   ...otherProps
 }) => {
   // isOpen should be false initially, even if defaultShow is true
@@ -67,7 +70,10 @@ const Overlay = ({
   };
   // Function to create the delay for hiding if currently open
   const hideWithDelay = () => {
-    if (isOpenRef.current) {
+    if (!isOpenRef.current && showTimeout.current) {
+      showTimeout.current = clearTimeout(showTimeout.current);
+      hide();
+    } else if (isOpenRef.current) {
       clearTimeout(hideTimeout.current);
       hideTimeout.current = setTimeout(hide, delay.hide);
     }
@@ -85,7 +91,10 @@ const Overlay = ({
   };
   // Function to create the delay for showing, if currently closed
   const showWithDelay = () => {
-    if (!isOpenRef.current) {
+    if (isOpenRef.current && hideTimeout.current) {
+      hideTimeout.current = clearTimeout(hideTimeout.current);
+      show();
+    } else if (!isOpenRef.current) {
       clearTimeout(showTimeout.current);
       showTimeout.current = setTimeout(show, delay.show);
     }
@@ -110,6 +119,25 @@ const Overlay = ({
     }
   };
 
+  const handleMouseOverTooltipContent = e => {
+    if (triggers.indexOf('hover') > -1 && !autohide) {
+      if (hideTimeout.current) {
+        hideTimeout.current = clearTimeout(hideTimeout.current);
+      }
+      show();
+    }
+  };
+
+  const handleMouseLeaveTooltipContent = e => {
+    if (triggers.indexOf('hover') > -1 && !autohide) {
+      if (showTimeout.current) {
+        showTimeout.current = clearTimeout(showTimeout.current);
+      }
+      e.persist();
+      hideWithDelay();
+    }
+  };
+
   // Add event listeners
   const addEventListeners = t => {
     if (t) {
@@ -178,16 +206,28 @@ const Overlay = ({
   }, [targetStr]);
 
   return (
-    <RBOverlay
-      show={isOpen}
-      rootClose={rootClose} // Close when clicking outside the icon
-      onHide={() => setIsOpen(false)} // Must be defined when using rootClose
-      target={targetRef.current}
-      {...otherProps}
+    <OverlayContext.Provider
+      value={{handleMouseOverTooltipContent, handleMouseLeaveTooltipContent}}
     >
-      {children}
-    </RBOverlay>
+      <RBOverlay
+        show={isOpen}
+        rootClose={rootClose} // Close when clicking outside the icon
+        // Must be defined when using rootClose
+        // need to make sure that props stay in sync
+        onHide={() => {
+          setIsOpen(false);
+          if (setProps) {
+            setProps({is_open: false});
+          }
+        }}
+        target={targetRef.current}
+        {...otherProps}
+      >
+        {children}
+      </RBOverlay>
+    </OverlayContext.Provider>
   );
 };
 
 export default Overlay;
+export {OverlayContext};

src/private/PopoverTemplate.js renamed to src/private/OverlayTemplates.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import classNames from 'classnames';
 import PopoverBody from 'react-bootstrap/PopoverBody';
+import {OverlayContext} from './Overlay';
 
 // Convert from left/right to start/end
 const getOverlayDirection = placement => {
@@ -35,6 +36,10 @@ const PopoverTemplate = React.forwardRef(
     // Identify the direction and placement
     const [primaryPlacement] = placement?.split('-') || [];
     const bsDirection = getOverlayDirection(primaryPlacement);
+    const {
+      handleMouseOverTooltipContent,
+      handleMouseLeaveTooltipContent
+    } = useContext(OverlayContext);
 
     return (
       <div
@@ -47,6 +52,8 @@ const PopoverTemplate = React.forwardRef(
           'popover',
           primaryPlacement && `bs-popover-${bsDirection}`
         )}
+        onMouseOver={handleMouseOverTooltipContent}
+        onMouseLeave={handleMouseLeaveTooltipContent}
         {...props}
       >
         {!hideArrow && <div className="popover-arrow" {...arrowProps} />}
@@ -56,4 +63,49 @@ const PopoverTemplate = React.forwardRef(
   }
 );
 
-export default PopoverTemplate;
+const TooltipTemplate = React.forwardRef(
+  (
+    {
+      bsPrefix,
+      placement,
+      className,
+      style,
+      children,
+      arrowProps,
+      popper: _,
+      show: _2,
+      ...props
+    },
+    ref
+  ) => {
+    const [primaryPlacement] = placement?.split('-') || [];
+    const bsDirection = getOverlayDirection(primaryPlacement);
+
+    const {
+      handleMouseOverTooltipContent,
+      handleMouseLeaveTooltipContent
+    } = useContext(OverlayContext);
+
+    return (
+      <div
+        ref={ref}
+        style={style}
+        role="tooltip"
+        x-placement={primaryPlacement}
+        className={classNames(
+          className,
+          'tooltip',
+          `bs-tooltip-${bsDirection}`
+        )}
+        onMouseOver={handleMouseOverTooltipContent}
+        onMouseLeave={handleMouseLeaveTooltipContent}
+        {...props}
+      >
+        <div className="tooltip-arrow" {...arrowProps} />
+        <div className={'tooltip-inner'}>{children}</div>
+      </div>
+    );
+  }
+);
+
+export {PopoverTemplate, TooltipTemplate};