Calculating multiple elements' position in order to .offset() it

Question

Where I'm At

I've managed to get the location of all of the headshots of politicans in index.html using jQuery's .offset()

Where I'm Stuck

I'm looking to get each individual image's location on the page (using their class or id) and then change the current top and left values of the tooltip (which contains info about each of the politicians), using .offset() so it's appears near/above where the corresponding image of that politician is on the page.

UPDATE #1

@Roko: Can you elaborate on why the positioning needs to be fixed in this case. Likewise, with your suggested change, I can see the HTML for div class="tooltip" style="display: block; top: ... px; left ... px;"></div> but the numbers seem to have shifted the tooltip too much.

Tried:

    $('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
            });
        });



    });

AND

var   position = $el.data('.elem'),
                ImagePosition = $el.offset(),
                ImageSize = {
                  'width': $el.outerWidth(),
                  'height': $el.outerHeight()
                };

        'top': ImagePosition.top - el.outerHeight() 
        'left': ImagePosition.left - (elelment.outerWidth()/2) + (elementSize.width/2)

scripts.js

    // Positioning of the tooltips
    $(".headshot").click(function(){

        // Fades in the tooltip
        $(".tooltip").fadeIn("fast");

        // This is the coordinates for current position of a tooltip
        var coords = $(".tooltip").offset();

        var height = $(".tooltip").height();
        console.log(height);

        var width = $(".tooltip").width();
        console.log(width);

        // How do I figure out how much top or left I need to move it?
        alert("Top: " + coords.top + " Left: " + coords.left);
        console.log(coords);
});

index.html

<div class="tooltip">
                <div class="info">
                    <p class="tooltipName"></p>
                    <p class="tooltipParty"></p> <p class="tooltipConstuency"></p>
                    <p class="tooltipEthnicity"></p> <p class="tooltipAge"></p>
                    </div><!-- /.info -->

                    <div class="arrow-down">
                    </div><!-- /.arrow-down -->
                </div><!-- /.tooltip -->

<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">

tooltip.scss

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

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

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

    p {
        margin: 0px;
    }
}

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

.tooltipEthnicity, .tooltipAge {
    display: inline;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;

Answer 1

jsBin demo

$('img').click(function(){

    var img = $(this);

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

});

and

.tooltip {
    display: none;
    position: absolute;  /* set to absolute */
    left: -12px;
    top: -5px;
}

also make sure to actually have some value inside the alt="" attribute!