工具提示 glitchy/repeating

Question

我是 javascript 的新手，所以我觉得我可能设置错了——我正在尝试制作一个包含短循环 mp4 视频的起始页；同时将整个页面设置为link；始终将光标设置为指针，并显示恒定的工具提示。这一切似乎都在工作，除了工具提示是断断续续的，冻结的，偶尔在页面上重复。我非常感谢任何见解或方法来更好地设置它，替代方法来处理它？

很多，非常感谢。

示例代码在这里：https://github.com/rrrhhhhhhhhh/opener

页面在这里：https://rrrhhhhhhhhh.github.io/opener/

Answer 1

在 tooltip.js 文件中使用 mouseEnter 事件而不是 mouseOver（即 slower）并创建一个变量来判断鼠标是否 'In'或'Out'，这里是js代码：


function initTooltip() {
    const tooltips = Array.from(document.querySelectorAll('[data-tooltip-container]'));
    let mouseIn = true;

    tooltips.map(tooltip => {
        tooltip.addEventListener('mouseenter', handleMouseEnter);
    })

    function handleMouseEnter() {
        mouseIn = true;
        const tooltipbox = createTooltipBox(this);

        handleMouseMove.tooltipbox = tooltipbox;
        this.addEventListener('mousemove', handleMouseMove);

        handleMouseLeave.tooltipbox = tooltipbox;
        handleMouseLeave.element = this;
        this.addEventListener('mouseleave', handleMouseLeave);
    }

    const handleMouseLeave = {
        handleEvent() {
            mouseIn = false;
            this.tooltipbox.remove();
            this.element.removeEventListener('mousemove', handleMouseMove);
            this.element.removeEventListener('mouseleave', handleMouseLeave);
        }
    }

    const handleMouseMove = {
        handleEvent(e) {
            if(!mouseIn){
                return;
            }
            this.tooltipbox.style.top = e.clientY + 25 + 'px';
            this.tooltipbox.style.left = e.clientX + 13 +'px';
        }
    }

    function createTooltipBox(el) {
        let tooltip = document.createElement('div');
        tooltip.innerText = el.getAttribute('data-tooltip-label');
        tooltip.classList.add('tooltip');

        document.body.appendChild(tooltip);

        return tooltip;
    }
}

initTooltip();

工具提示 glitchy/repeating

Tooltip glitchy/repeating

javascript

html

css

tooltip