使用jQuery＆＃39; s .offset（）进行工具提示定位

Question

更新 - 仍未解决，最后更新时间为下午9点

问题

a）如何使用.offset（）将这些工具提示放在相对靠近图像的位置（即如果我点击“Allum”爆头，他们的工具提示会弹出他们的图像）

我在哪里

我正在尝试使用jQuery的.offset()，以便在点击政治家的图像(.headshot in index.html)时，包含有关其年龄，派对等信息的工具提示/弹出窗口非常接近他们的形象。现在我将动态内容放入这些工具提示中，但它始终位于同一位置。

scripts.js（政治家​​和定位片段）

// 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片段）

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

Answer 1

试试这个：

  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)