计算多个元素的位置以便 .offset() 它

Question

我在哪里

我已经使用 jQuery 的 .offset()

找到了 index.html 中所有政客头像的位置

我被困在哪里

我想获取每个图像在页面上的位置（使用它们的 class 或 ID），然后更改工具提示的当前顶部和左侧值（其中包含有关每个政客的信息), 使用 .offset() 所以它出现 near/above 那个政客的相应图像在页面上。

更新 #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
            });
        });



    });

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

});

和

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

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

计算多个元素的位置以便 .offset() 它

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

javascript

css

jquery

offset