Баг со всплывающим окном

Если наводить мышь на объекты man поочередно, выждав пока pop-up пропадет - всё работает, конфликтов не возникает. Но, если не ждать пока пропадет один pop-up и сразу навести на следующий man - pop-up от первого объекта остается висеть. Задача состоит в том, что бы вне зависимости друг от друга pop-up могли всплывать и исчезать бесконфликтно. Заранее спасибо за помощь.

let timeout,
    id;
$(".man").mouseenter(function() {
    id = $(this).attr('data-id');
    $('.pop-up-' + id).fadeIn(400);
})
$(".man").mouseleave(function() {
    id = $(this).attr('data-id');
    timeout = setTimeout(function() {
        $('.pop-up-' + id).fadeOut(400);
    }, 2000);
})
$(".pop-up-" + id).mouseenter(function() {
    clearTimeout(timeout);
})
$(".pop-up-" + id).mouseleave(function() {
    $(this).fadeOut(400);
})