diff --git a/packages/react-core/src/components/Tooltip/Tooltip.tsx b/packages/react-core/src/components/Tooltip/Tooltip.tsx index dbe0927c6e0..6ab8a21efa2 100644 --- a/packages/react-core/src/components/Tooltip/Tooltip.tsx +++ b/packages/react-core/src/components/Tooltip/Tooltip.tsx @@ -63,7 +63,10 @@ export interface TooltipProps extends Omit, '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 = ({ 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 = ({ placement={position} onMouseEnter={triggerOnMouseenter && show} onMouseLeave={triggerOnMouseenter && hide} + onPopperMouseEnter={triggerOnMouseenter && show} + onPopperMouseLeave={triggerOnMouseenter && hide} onFocus={triggerOnFocus && show} onBlur={triggerOnFocus && hide} onDocumentClick={triggerOnClick && onDocumentClick} diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 453d52c0a7e..4229f175cc4 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -94,6 +94,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 */ @@ -139,6 +143,8 @@ export const Popper: React.FunctionComponent = ({ onTriggerClick, onTriggerEnter, onPopperClick, + onPopperMouseEnter, + onPopperMouseLeave, onDocumentKeyDown, enableFlip = true, flipBehavior = 'flip', @@ -185,6 +191,8 @@ export const Popper: React.FunctionComponent = ({ 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'); @@ -202,6 +210,8 @@ export const Popper: React.FunctionComponent = ({ 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(); @@ -216,6 +226,8 @@ export const Popper: React.FunctionComponent = ({ onTriggerClick, onTriggerEnter, onPopperClick, + onPopperMouseEnter, + onPopperMouseLeave, onDocumentClick, onDocumentKeyDown, refElement