Trouble with tooltip positioning using .offset()

Updated: Sat, Feb 21, 3:30 p.m., still unresolved

Where I'm at

I'm trying to use jQuery's .offset() so that when an image (.headshot in index.html) of a politician is clicked, the tooltip/popup, containing information about their age, party etc. is positioned pretty close to their image. Right now I have dynamic content being pulled into these tooltips, but it's always in the same spot.

Where I'm stuck

a) How do I use .offset() to position these tooltips relatively close to their image (ie. If I click on the "Allum" headshot, their tooltip pops up above their image)

b) I tried using var img = $(this); in my block of code for the positioning of the tooltips, but then my tooltips wouldn't show up when I clicked an image.

scripts.js (Politician and Positioning snippet)

// 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).prepend("<strong>Party: </strong>");
    $(".tooltipConstuency").html(MLAs[idx].Constuency).prepend("<strong>Constuency: </strong>");
    $(".tooltipEthnicity").html(MLAs[idx].Ethnicity).prepend("<strong>Ethnicity: </strong>");
    $(".tooltipAge").html(MLAs[idx].Age).prepend("<strong>Age: </strong>").append(" years old");
});


// Positioning of the tooltips
$('img').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(Headshot snippet)

<div class="columns">
                    <img src="assets/img/headshots/allan.jpg" alt="" id="0" class="headshot NDP Female White">
                    <img src="assets/img/headshots/allum.jpg" alt="" id="1" class="headshot NDP Male White">
                    <img src="assets/img/headshots/altemeyer.jpg" alt="" id="2" class="headshot NDP Male White">
</div>

tooltip.scss

/*----------------------------------
TOOLTIP
----------------------------------*/

.tooltip {
    display: none;
    position: relative;
    left: 45px;
    top: -5px;
}

.info {
    @include serifLight;
    background: $yellow;
    color: $black;
    font-size: 1.4rem;
    padding: 12px;
    width: 15%;
    // text-align: center;

    p {
        margin: 0px;
        padding-top: 2%;
    }
}

.tooltipName, {
    font-family: 'Roboto Slab',serif;
    font-weight: 700;
}

.label {
    color: $b;
    display: inline;
    padding-top: 1.5%;
}

.tooltipEthnicity, .tooltipAge {
    display: block;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid $yellow;
    position: relative;
    left: 29px;
}