diff --git a/packages/insomnia/src/ui/components/tooltip.tsx b/packages/insomnia/src/ui/components/tooltip.tsx index 7569c7391a..cd2f71c2f8 100644 --- a/packages/insomnia/src/ui/components/tooltip.tsx +++ b/packages/insomnia/src/ui/components/tooltip.tsx @@ -1,6 +1,7 @@ import classnames from 'classnames'; import React, { type CSSProperties, type ReactNode } from 'react'; import { mergeProps, OverlayContainer, useOverlayPosition, useTooltip, useTooltipTrigger } from 'react-aria'; +import { createPortal } from 'react-dom'; import { useTooltipTriggerState } from 'react-stately'; interface Props { @@ -17,8 +18,8 @@ interface Props { export const Tooltip = (props: Props) => { const { children, message, className, wide, selectable, delay = 400, position, style } = props; - const triggerRef = React.useRef(null); - const overlayRef = React.useRef(null); + const triggerRef = React.useRef(null); + const overlayRef = React.useRef(null); const state = useTooltipTriggerState({ delay }); const trigger = useTooltipTrigger(props, state, triggerRef); @@ -39,6 +40,19 @@ export const Tooltip = (props: Props) => { selectable, }); + const overlayContent = ( +
e.stopPropagation()} + {...mergeProps(tooltip.tooltipProps, positionProps)} + className={bubbleClasses} + > + {message} +
+ ); + + const modalContainer = triggerRef.current?.closest('[aria-label="Modal"]'); + return ( <>
{ > {children}
- {state.isOpen && ( - -
e.stopPropagation()} - {...mergeProps(tooltip.tooltipProps, positionProps)} - className={bubbleClasses} - > - {message} -
-
- )} + {state.isOpen && + (modalContainer ? ( + // Render tooltip inside modal if exists. + // Otherwise OverlayContainer becomes inert and breaks hover event listener: INS-1930 + createPortal(overlayContent, modalContainer) + ) : ( + {overlayContent} + ))} ); };