Сделать появляющиеся popup окна при наведении мышью для разных элементов

Никак не могу добиться чтоб сделать отдельное вспылвающее окно при наведении мышью для каждого элемента. Есть такой код:

for (i=0;i<data.length;i++){
    div1.innerHTML += '<img class="icons" src="images/icons/all/' + data[i][0] + '.png" height="140px" />';
    div1.innerHTML += '<div class="mypopup" style="display:none;width:200px;position:absolute;border:1px solid black;"><h3>Заголовок</h3><p>'+(разные данные берутся с массива data)+'</p></div>';
    var mypopup = document.querySelectorAll('.mypopup');
    var icon = document.querySelectorAll('.icons');
    document.querySelectorAll('.icons').forEach(item => {
        item.addEventListener("mouseover", showPopup(i));
        item.addEventListener("mouseout", hidePopup(i));
    });
}

function showPopup(i) {
    var iconPos = icon[i].getBoundingClientRect();
    mypopup[i].style.left = (iconPos.right + 10) + "px";
    mypopup[i].style.top = (window.scrollY + iconPos.top + 20) + "px";
    mypopup[i].style.display = "block";
}

function hidePopup(i) {
    mypopup[i].style.display = "none";
}

Как не пытаюсь сделать, что-то - не получается. То всплывающее окно не отображается, то пишет в консоле, что элемент не определён.

P.S. С всплывающими окнами ранее не работал, метод взял из интернета и пытался переделать под свой вариант, но полностью не получилось.