javascript - 使用 jQuery 的 .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(爆头片段)

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

工具提示.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)