我的工具提示位置有问题，总是在同一个地方显示位置

Question

这是代码，是一个简单的工具提示，但我在这里冻结了！！帮助

const StyledTooltip = styled.div`
position: absolute;
visibility: hidden;
background: #666565;

`
const Element = styled.div`
background: #666565;
padding: 0;
margin: 0;
line-height: 0;
width: fit-content;

`
const Container = styled.div<{ width: number; height: number }>`
position: relative;
cursor: pointer;
white-space: normal;
box-sizing: border-box;
line-height: normal;
width: fit-content;

&:hover > ${StyledTooltip} {
    visibility: visible;
    border-radius: 8px;
    padding: 10px;
    height: ${props => `${props.height}px;`} ;
    width: ${props => `${props.width}px;`} ;
    
}

&::after :hover > ${StyledTooltip}[position= 'left']{
    right: calc(100% - 50px);
    top: -5px;
        &::after {
        content: "";
        display: block;
        position: absolute;
        border-top: 7px solid #666565;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        top: 40%;
        transform: rotate(-90deg);
        right:-10px;
}
    
}
&::after :hover > ${StyledTooltip}[position='right']{
    left: calc(100% - 50px);
    &::after {
        content: "";
        display: block;
        position: absolute;
        border-top: 7px solid #666565;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        transform: rotate(91deg);
        bottom: calc(50% - 5px);
        left:-9px;
}
}
&::after :hover > ${StyledTooltip}[position = 'top']{
    bottom: calc(100% - 15px);
    right: calc(100% - 15px);
        &::after {
        content: "";
        display: block;
        position: absolute;
        border-top: 7px solid #666565;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        bottom: -6px;
        left:calc(48% - 7px) ;

}
}
&::after :hover > ${StyledTooltip}[position = 'bottom']{
    top: calc(100% + 50px);
    &::after {
        content: "";
        display: block;
        position: absolute;
        border-bottom: 7px solid #666565;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        bottom: 58px;
        left:calc(54% - 8px) ;

}
}
`

type ToolTip ={
    children: JSX.Element,
    description: string,
    position?: 'left'| 'right'| 'top'| 'bottom'
}

export const ToolTipHover = (props: ToolTip) => {
    const tooltipRef = useRef<HTMLDivElement>(null)
    const [position, setPosition] = useState<string>('top')
    const minWidth = 150
    const minHeight = 150

    useEffect(() => {
        if(tooltipRef.current) {
            const top = tooltipRef.current.offsetTop
            const left = tooltipRef.current.offsetLeft
            const bottom = window.innerHeight - top - tooltipRef.current.offsetHeight
            const right = window.innerWidth - left - tooltipRef.current.offsetWidth
            console.log({
                top, bottom, left, right
            })
            if(top > minHeight && bottom < top) return setPosition('top')
            if(bottom > minHeight && top < bottom ) return setPosition('bottom')
            if(left > minWidth && right < left) return setPosition('left')
            if(right > minWidth && left < right ) return setPosition('right')
        }
    },[tooltipRef.current])
    console.log(position)
    return (
    <Container ref={tooltipRef} width={minWidth} height={minHeight} >
<Element >{props.children}</Element> 
        <StyledTooltip position={props.position || position}>
        {props.description}
        </StyledTooltip>
        
    </Container>
    )
}

它应该在屏幕上显示工具提示，具体取决于元素在哪里，但无论元素是什么，工具提示仍然显示在同一个位置，我认为位置变量是错误的或者我以错误的方式调用位置或其他什么像那样