function setupTooltip(element, tooltip, getText) {
    element.addEventListener('mouseenter', (e) => {
        tooltip.textContent = getText();
        tooltip.style.display = 'block';
        tooltip.style.left = `${e.clientX + 15}px`;
        tooltip.style.top = `${e.clientY - 35}px`;
    });

    element.addEventListener('mousemove', (e) => {
        tooltip.style.left = `${e.clientX + 15}px`;
        tooltip.style.top = `${e.clientY - 35}px`;
    });

    element.addEventListener('mouseleave', () => {
        tooltip.style.display = 'none';
    });
}

function replaceWithTooltip(element, tooltip, getText) {
    const newElement = element.cloneNode(true);
    element.parentNode.replaceChild(newElement, element);
    setupTooltip(newElement, tooltip, getText);
    return newElement;
}