feat(Popper): add mouse events for popper content (#7399)

Author: thatblindgeye

packages/react-core/src/components/Tooltip/Tooltip.tsx

@@ -63,7 +63,10 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
   enableFlip?: boolean;
   /** Delay in ms before the tooltip appears */
   entryDelay?: number;
-  /** Delay in ms before the tooltip disappears */
+  /** Delay in ms before the tooltip disappears, Avoid passing in a value of "0", as users should
+   * be given ample time to move their mouse from the trigger to the tooltip content without the content
+   * being hidden.
+   */
   exitDelay?: number;
   /**
    * The desired position to flip the tooltip to if the initial position is not possible.
@@ -149,7 +152,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   enableFlip = true,
   className = '',
   entryDelay = 300,
-  exitDelay = 0,
+  exitDelay = 300,
   appendTo = () => document.body,
   zIndex = 9999,
   maxWidth = tooltipMaxWidth.value,
@@ -318,6 +321,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       placement={position}
       onMouseEnter={triggerOnMouseenter && show}
       onMouseLeave={triggerOnMouseenter && hide}
+      onPopperMouseEnter={triggerOnMouseenter && show}
+      onPopperMouseLeave={triggerOnMouseenter && hide}
       onFocus={triggerOnFocus && show}
       onBlur={triggerOnFocus && hide}
       onDocumentClick={triggerOnClick && onDocumentClick}

packages/react-core/src/helpers/Popper/Popper.tsx

@@ -95,6 +95,10 @@ export interface PopperProps {
   onTriggerEnter?: (event?: KeyboardEvent) => void;
   /** Callback function when popper is clicked */
   onPopperClick?: (event?: MouseEvent) => void;
+  /** Callback function when mouse enters popper content */
+  onPopperMouseEnter?: (event?: MouseEvent) => void;
+  /** Callback function when mouse leaves popper content */
+  onPopperMouseLeave?: (event?: MouseEvent) => void;
   /** Callback function when document is clicked */
   onDocumentClick?: (event?: MouseEvent, triggerElement?: HTMLElement, popperElement?: HTMLElement) => void;
   /** Callback function when keydown event occurs on document */
@@ -140,6 +144,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onTriggerClick,
   onTriggerEnter,
   onPopperClick,
+  onPopperMouseEnter,
+  onPopperMouseLeave,
   onDocumentKeyDown,
   enableFlip = true,
   flipBehavior = 'flip',
@@ -186,6 +192,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     addEventListener(onTriggerClick, refOrTrigger, 'click');
     addEventListener(onTriggerEnter, refOrTrigger, 'keydown');
     addEventListener(onPopperClick, popperElement, 'click');
+    addEventListener(onPopperMouseEnter, popperElement, 'mouseenter');
+    addEventListener(onPopperMouseLeave, popperElement, 'mouseleave');
     onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click');
     addEventListener(onDocumentKeyDown, document, 'keydown');
 
@@ -203,6 +211,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       removeEventListener(onTriggerClick, refOrTrigger, 'click');
       removeEventListener(onTriggerEnter, refOrTrigger, 'keydown');
       removeEventListener(onPopperClick, popperElement, 'click');
+      removeEventListener(onPopperMouseEnter, popperElement, 'mouseenter');
+      removeEventListener(onPopperMouseLeave, popperElement, 'mouseleave');
       onDocumentClick && removeEventListener(onDocumentClickCallback, document, 'click');
       removeEventListener(onDocumentKeyDown, document, 'keydown');
       observer.disconnect();
@@ -217,6 +227,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     onTriggerClick,
     onTriggerEnter,
     onPopperClick,
+    onPopperMouseEnter,
+    onPopperMouseLeave,
     onDocumentClick,
     onDocumentKeyDown,
     refElement