gypsy-crm-frontend-vu/utils/useMouseTooltip.js

let t = null
let r = null
let l = null

export function useMouseTooltip() {
    const TOOLTIP_WIDTH = 80
    const TOOLTIP_HEIGHT = 40
    const PADDING = 16

    const updateTooltipPosition = (clientX, clientY) => {
        const viewportWidth = window.innerWidth
        const viewportHeight = window.innerHeight

        let x = clientX
        let y = clientY
        let flipX = false
        let flipY = false

        if (clientX + TOOLTIP_WIDTH + PADDING > viewportWidth) {
            x = clientX - TOOLTIP_WIDTH - PADDING
            flipX = true
        }

        if (clientY + TOOLTIP_HEIGHT + PADDING > viewportHeight) {
            y = clientY - TOOLTIP_HEIGHT - PADDING
            flipY = true
        }

        x = Math.max(PADDING, x)
        y = Math.max(PADDING, y)

        document.documentElement.style.setProperty('--mouse-x', x + 'px')
        document.documentElement.style.setProperty('--mouse-y', y + 'px')
        document.documentElement.style.setProperty('--tooltip-flip-x', flipX ? 'true' : 'false')
        document.documentElement.style.setProperty('--tooltip-flip-y', flipY ? 'true' : 'false')
    }

    const u = (e, instant = false) => {
        if (instant) {
            updateTooltipPosition(e.clientX, e.clientY)
        }

        clearTimeout(t)
        t = setTimeout(() => {
            updateTooltipPosition(e.clientX, e.clientY)
        }, 200)
    }

    const c = () => {
        clearTimeout(t)
        document.documentElement.style.removeProperty('--mouse-x')
        document.documentElement.style.removeProperty('--mouse-y')
        document.documentElement.style.removeProperty('--tooltip-flip-x')
        document.documentElement.style.removeProperty('--tooltip-flip-y')
    }

    const i = () => {
        // 鼠标移动 → 节流更新
        r = (e) => {
            if (e.target.closest('.cursor-pointer')) {
                u(e)
            }
        }

        // 鼠标进入新元素 → 🔥 立刻刷新位置（解决你说的问题）
        const enter = (e) => {
            if (e.target.closest('.cursor-pointer')) {
                u(e, true) // 立刻更新
            }
        }

        // 鼠标离开 → 延迟清除
        l = (e) => {
            if (e.target.closest('.cursor-pointer')) {
                clearTimeout(t)
                t = setTimeout(() => {
                    c()
                }, 100)
            }
        }

        document.addEventListener('mousemove', r, true)
        document.addEventListener('mouseenter', enter, true) // 新增
        document.addEventListener('mouseout', l, true)
    }

    const d = () => {
        clearTimeout(t)
        c()
        if (r) document.removeEventListener('mousemove', r, true)
        if (l) document.removeEventListener('mouseout', l, true)
        r = null
        l = null
    }

    i()
    return d
}