Tooltip glitchy/repeating

Question

I'm new to javascript, so I have a feeling I may of set this up wrong—I'm trying to make an opening page that features a short looping mp4 video; at the same time setting up the entire page to be a link; all the while having the cursor set to pointer with a constant tooltip displayed. It all seems to be working, except the tooltip is stuttering, freezing, repeating across the page occasionally. I'd greatly appreciate any insight or ways to set this up better, alternative ways to approach it?

Many, many thanks.

Sample code here: https://github.com/rrrhhhhhhhhh/opener

Page here: https://rrrhhhhhhhhh.github.io/opener/

Answer 1

In the tooltip.js file use mouseEnter event instead of mouseOver (which is slower) and create a variable that tells if the mouse is 'In' or 'Out', here's the js code:

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();