Не удается заставить метод .offset () работать при переборе набора элементов списка

Question

По сути, я пытаюсь применить всплывающую подсказку, похожую на всплывающую подсказку, для набора элементов списка. Кажется, все работает нормально, за исключением размещения всплывающего окна. Я пытаюсь использовать .offset(), чтобы получить координаты каждого элемента списка, чтобы я мог расположить всплывающий элемент div относительно элемента списка. Я включил соответствующие HTML-элементы, CSS и мой скрипт ниже. Любая помощь приветствуется!

HTML:

<ul>
    <li class="checked" title="This is a test popup message">Yada yada yada</li>
    <li class="checked" title="This is another test popup message">Yada yada yada</li>
    <li class="checked" title="This is yet another test popup message">Yada yada yada</li>
</ul>

CSS:

.popup {
    position: absolute;
    width: 300px;
    padding: 20px;
    background: rgba(0,0,0, .5);
    z-index: 10000;
    display: none;
}

JavaScript:

$(document).ready(function() {

activatePopup = function() {
    var popupMarkup = '<div class="popup">' + '</div>';
    return popupMarkup;
}

$('body').prepend(activatePopup());

$('.checked').each(function() {
    // Sets popup text based on title attribute
    var popup = $('.popup');
    var popupText = $(this).attr('title');
    $(this).attr('title', '');

    //Grabs Position data of trigger element
    var pos = $(this).offset();
    var posTop = pos.top;
    var posLeft = pos.left;


    $(this).click(function() {
        popup.html(popupText);
        if (popup.is(":hidden")) {
            popup.fadeIn('fast');
        } else {
            popup.fadeOut('fast');
        }

        $(this).toggleClass('unchecked');
        $(this).toggleClass('checked');

        setPos(posTop, posLeft);
    });

    setPos = function(top, left) {
        var yPos = (top - 80) + 'px';
        var xPos = (left + 40) + 'px';

        popup.css({'top' : yPos, 'left' : xPos});
    }
});
});

Answer 1

попробуйте в том числе

//Grabs Position data of trigger element
var pos = $(this).offset();
var posTop = pos.top;
var posLeft = pos.left;

внутри вас click функция как:

   $(this).click(function() {
        var pos = $(this).offset();
        var posTop = pos.top;
        var posLeft = pos.left;

        popup.html(popupText);
        if (popup.is(":hidden")) {
            popup.fadeIn('fast');
        } else {
            popup.fadeOut('fast');
        }

        $(this).toggleClass('unchecked');
        $(this).toggleClass('checked');

        setPos(posTop, posLeft);
    });

это должно сделать это:)