tooltip.js

;(function() {
    const elems = document.querySelectorAll('[data-tooltip]')
    const tip = document.createElement('div')
    tip.classList.add('tooltip')
    document.body.append(tip)

    const mouseMove = (e) => {
        let { clientX, clientY } = e
        let current 
        elems.forEach(elem => {
            if (elem.contains(e.target)) {
                current = elem
            }
        })
        if (current) {
            let text = current.getAttribute('data-tooltip') || ''
            tip.textContent = text
            tip.style.top = clientY + 'px'
            tip.style.left = clientX + 'px'
            tip.classList.add('show')
        } else {
            tip.classList.remove('show')
        }
    }

    window.addEventListener('mousemove', mouseMove)
})()

tooltip.less

.tooltip {
    position: fixed; z-index: 10;
    display: flex;
    width: max-content; height: min-content;
    max-width: 170px;
    padding: 7px;
    color: #fff;
    background: rgba(5, 5, 5, 0.7);
    border-radius: 5px;
    font-size: 10px;
    line-height: 12px;
    opacity: 0; visibility: hidden;
    transform: translate(-50%, ~"calc(-100% - 12px)");
    transition: 0.5s opacity, 0.5s visibility;
    pointer-events: none;
    &.show {
        opacity: 1; visibility: visible;
    }
    &:after {
        content: '';
        position: absolute;
        top: 100%; left: ~"calc(50% - 6px)";
        border: 6px solid transparent; border-top: 6px solid rgba(5, 5, 5, 0.7);
    }
}