定位带有动态内容的信息框

Question

我在哪里

尝试将这些工具提示或信息框显示为相对于MLA的爆头（请参阅var MLA =，我已经能够在阵列中第一个人的图像上方获得第一个信息框。

我被困的地方

当我输入与scripts.js中工具提示的位置有关的代码块时，我无法将工具提示显示在其余人的图像上方，大约有50个在数组中，我已经包含了示例中两个人的片段。

同样，我在控制台中没有错误，我的工具提示中包含的信息（姓名，年龄，种族等）根本没有显示。

scripts.js中

$(function() {
    // MLAs
    var MLAs = [
    {
        "Name": "Nancy Allan",
        "Age": 62,
        "Constuency": "St. Vital",
        "Party": "NDP",
        "Gender": "Female",
        "Ethnicity": "White"
    },
    { // Missing Data
        "Name": "James Allum",
        "Age": null,
        "Constuency": "Fort Garry-Riverview",
        "Party": "NDP",
        "Gender": "Male",
        "Ethnicity": "White"
    }];

    // Shows a popup with MLA information
    $(".headshot").click(function(){
        var idx = $(this).index();

        $(".tooltip").fadeIn("slow");
        $(".tooltipName").html(MLAs[idx].Name);
        $(".tooltipParty").html(MLAs[idx].Party);
        $(".tooltipConstuency").html(MLAs[idx].Constuency);
        $(".tooltipEthnicity").html(MLAs[idx].Ethnicity);
        $(".tooltipAge").html(MLAs[idx].Age);
    });

    // Positioning of the tooltips
    $('.headshot').each(function(){
        var img = $(this);

        img.click(function(){
            $('.tooltip')
            .show(100)
            .text(img.attr('alt'))
            .offset({
                top : img.offset().top + img.height(),
                left : img.offset().left
            });
        });
    });
});

的index.html