计算多个元素的位置以便.offset（）它

Question

我在

的地方

我使用jQuery的.offset（）

设法获得了index.html中政治家所有爆头的位置。

我被困的地方

我希望在页面上获取每个图片的位置（使用他们的类或ID），然后更改工具提示的当前顶部和左侧值（其中包含有关每个政治家的信息） ），使用.offset（）使其出现在该政治家的相应图像在页面上的附近/上方。

更新＃1

@Roko：您能否详细说明在这种情况下需要修复定位的原因。同样，根据您建议的更改，我可以看到div class="tooltip" style="display: block; top: ... px; left ... px;"></div>的HTML，但数字似乎已经过多地改变了工具提示。

尝试：

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



    });

和

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
    });

});

和

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

还要确保在alt=""属性中确实有一些值！