How to show image (that follows mouse) when hovering over text

Question

This is my first post, and im not an experienced programmer or such - so please bare with me. Im just a no-code webdesigner using Wordpress, Elementor & Crocoblock to achieve most of my web-sites.

I have been struggling to insert some codes that reveal an image when hovering over text... I manage to find the code (se further below) and it works in backend inside ELementor editor, but in live version, the image is just fixed instead of following the mouse.

I hope that it makes sense?

Im using following codes: (placed in a html widget)

<script>
    var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};
</script>

</style>
    .tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:inline-block !important;
    position:fixed !important;
    overflow:hidden !important;
}

a.tooltip {
    font-size: 7.5vw;
    font-family: 'Inter';
    font-weight: 600;
    text-transform: uppercase;
    color: #000 !important; 
    letter-spacing: -0.5rem;
    line-height: 1rem
}
</style>

<a class="tooltip" href="#">
    Nhat Nguyen
    <span>
        <img class="follow" alt="" src="https://nhat-kd.dk/wp-content/uploads/2023/09/founder_img2.jpg" />
    </span>
</a>