import { createPortal } from 'react-dom'
import './styles/EphemeralTooltip.css'

interface PropsForEphemeralTooltip {
    forId: string
    message: string
}

export default function EphemeralTooltip({ forId, message }: PropsForEphemeralTooltip) {
    const rect = document.getElementById(forId)?.getBoundingClientRect()
    if (!rect) return null

    return createPortal(
        <div
            className="ephemeral-tooltip animation-scroll-in"
            style={{
                position: 'fixed',
                left: rect.left + rect.width / 2,
                top: rect.top - 8,
                transform: 'translateX(-50%) translateY(-100%)',
            }}>
            <p>{message}</p>
        </div>,
        document.body,
    )
}