Show tooltip when hovering over a link

I have a table that displays information about a musician. The first 2 lines are genres and countries. I use Thymleaf template engine to render such objects. Here is my code:

<table>
    <tr>
        <td class="desc">Genres: </td>
        <td> 
            <a class="genres" th:each="genre : ${genres}" th:href="${genre.getLink()}"
                th:text="${genre.getName()}"
                th:attr="data-description=${genre.getDescription()}">
            </a>
        </td>
    </tr>
    <tr>
        <td class="desc">Countries: </td>
        <td>
            <a class="countries" th:each="country : ${countries}" th:href="${country.getLink()}"
                th:text="${country.getName()}"
                th:attr="data-description=${country.getDescription()}">
            </a>
        </td>
    </tr>
</table>

I also created a block in which information will be displayed:

<div id="description"></div>

#description {
    background-color: white; 
    border-radius: 10px; 
    position: absolute; 
    display: inline-block; 
    opacity: 0; 
    padding: 5px; 
    transition: opacity 0.3s ease;
    font-size: small;
    max-width: 250px;
}

And I wrote the JS code that keeps track of the hover on the elements and the display of the tooltip:

<script>
    document.addEventListener('DOMContentLoaded', function() {
    var genres = document.querySelectorAll('.genres');
    var countries = document.querySelectorAll('.countries');
    var Description = document.getElementById('description');
    
    genres.forEach(function(genre) {
        var description = genre.getAttribute('data-description');
        
        genre.addEventListener('mouseover', function() {
        Description.textContent = description;
        Description.style.opacity = "1";

        var x = event.clientX/8 + 50;
        var y = event.clientY/2.5 - 5;
        
        Description.style.left = x + 'px';
        Description.style.top = y + 'px';
        });
        
        genre.addEventListener('mouseout', function() {
        Description.style.opacity = "0";
        });
    });

    countries.forEach(function(country) {
        var description = country.getAttribute('data-description');
        
        country.addEventListener('mouseover', function() {
        Description.textContent = description;
        Description.style.opacity = "1";

        var x = event.clientX - 1100;
        var y = event.clientY - 190;
        
        Description.style.left = x + 'px';
        Description.style.top = y + 'px';
        });
        
        country.addEventListener('mouseout', function() {
        Description.style.opacity = "0";
        });
    });
    });
</script>

Everything seems to be working, but sometimes there are failures with the country tooltip. The tooltip simply does not appear, and the countries themselves become unclickable. Maybe my code is not optimized? To what extent is this approach correct?