xamxam/app/templates/public/repertoire.php

<main class="search-main" id="main-content">
    <h1 class="sr-only">Répertoire</h1>
    <span id="rep-indicator" class="rep-indicator htmx-indicator" aria-hidden="true"></span>
    <?php include APP_ROOT . '/templates/partials/repertoire-index.php'; ?>
</main>
<!-- Student popover -->
<div id="student-popover" class="student-popover" hidden aria-live="polite"></div>

<script src="/assets/js/htmx.min.js"></script>
<script>
(function () {
    var popover = document.getElementById('student-popover');
    var currentAnchor = null;

    // Position the popover next to the hovered student entry
    function positionPopover(anchor) {
        var rect = anchor.getBoundingClientRect();
        var scrollY = window.scrollY || 0;
        var scrollX = window.scrollX || 0;
        // Place to the right of the column; fall back left if off-screen
        var left = rect.right + scrollX + 12;
        var top  = rect.top  + scrollY;
        if (left + 320 > window.innerWidth + scrollX) {
            left = rect.left + scrollX - 332;
        }
        popover.style.left = left + 'px';
        popover.style.top  = top  + 'px';
    }

    // Show popover after HTMX fills it
    document.body.addEventListener('htmx:afterSwap', function (e) {
        if (e.detail.target !== popover) return;
        if (!popover.innerHTML.trim()) return;
        popover.hidden = false;
        if (currentAnchor) positionPopover(currentAnchor);
    });

    // Track hovered anchor
    document.body.addEventListener('mouseenter', function (e) {
        var a = e.target.closest('[data-student-name]');
        if (!a) return;
        currentAnchor = a;
    }, true);

    // Hide when leaving BOTH the anchor and the popover
    document.body.addEventListener('mouseleave', function (e) {
        var a = e.target.closest('[data-student-name]');
        var p = e.target.closest('#student-popover');
        if (!a && !p) return;
        // Small delay so mouse can move into popover
        setTimeout(function () {
            var hoverAnchor = document.querySelector('[data-student-name]:hover');
            var hoverPop    = document.querySelector('#student-popover:hover');
            if (!hoverAnchor && !hoverPop) {
                popover.hidden = true;
                popover.innerHTML = '';
                currentAnchor = null;
            }
        }, 120);
    }, true);
}());
</script>