Tooltip.tsx

import * as React from 'react'
import {
  useFloating,
  useHover,
  useInteractions,
  FloatingPortal,
  offset,
  shift,
  flip,
  autoUpdate,
} from '@floating-ui/react'

interface TooltipProps {
  content: React.ReactNode
  children: React.ReactElement
  placement?: 'top' | 'right' | 'bottom' | 'left'
  className?: string
}

export function Tooltip({
  content,
  children,
  placement = 'top',
  className = '',
}: TooltipProps) {
  const [isOpen, setIsOpen] = React.useState(false)
  const [isMounted, setIsMounted] = React.useState(false)
  const portalRoot = React.useRef<HTMLElement | null>(null)

  const { refs, floatingStyles, context } = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
    placement,
    middleware: [offset(5), flip(), shift()],
    whileElementsMounted: autoUpdate,
  })

  const hover = useHover(context)

  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 */}
      {React.cloneElement(children, {
        // eslint-disable-next-line react-hooks/refs
        ref: refs.setReference,
        ...getReferenceProps(),
      } as any)}
      {isMounted && portalRoot.current && (
        <FloatingPortal root={portalRoot.current}>
          {isOpen && (
            <div
              ref={refs.setFloating /* eslint-disable-line react-hooks/refs */}
              style={floatingStyles}
              {...getFloatingProps()}
              className={`z-50 rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-gray-800 ${className}`}
            >
              {content}
            </div>
          )}
        </FloatingPortal>
      )}
    </>
  )
}