diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index 2dab0bbe..e3577cda 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -24,6 +24,8 @@ export function Tooltip({ className = '', }: TooltipProps) { const [isOpen, setIsOpen] = React.useState(false) + const [isMounted, setIsMounted] = React.useState(false) + const portalRoot = React.useRef(null) const { refs, floatingStyles, context } = useFloating({ open: isOpen, @@ -37,6 +39,21 @@ export function Tooltip({ const { getReferenceProps, getFloatingProps } = useInteractions([hover]) + // Ensure DOM is ready before rendering the portal + React.useEffect(() => { + // Only set portalRoot if we're in a browser environment + if (typeof window !== 'undefined' && typeof document !== 'undefined') { + portalRoot.current = document.body + setIsMounted(true) + } + + return () => { + // Clean up on unmount to prevent memory leaks + setIsMounted(false) + portalRoot.current = null + } + }, []) + return ( <> {/* eslint-disable-next-line react-hooks/refs */} @@ -45,18 +62,20 @@ export function Tooltip({ ref: refs.setReference, ...getReferenceProps(), } as any)} - - {isOpen && ( -
- {content} -
- )} -
+ {isMounted && portalRoot.current && ( + + {isOpen && ( +
+ {content} +
+ )} +
+ )} ) }