加載圖像后，彈出窗口Twitter Bootstrap Popover沒有顯示在正確的位置

Question

我在加載圖像后指針標簽不在正確的位置時遇到問題。 我注意到將鼠標懸停在圖片上的位置正確，但是由於圖片僅在javascript運行后才加載，因此如果圖片具有一定的寬度和高度，它將向下推“指針標記”。

$("#prodImage").popover(
            {
              title: "#Title Here",
              trigger:"hover",
              content: "<img src='path_to_image' />",
              placement:'right'
            });

錯誤外觀的例子：

應該在手表所在的徽標上。

Answer 1

這是默認行為。

就像CSS中一樣，箭頭將自動位於框的中心，它的top屬性是50％。

.popover.right .arrow { top: 50%;}. 

您需要手動放置它。

Answer 2

您還可以嘗試修復彈出窗口，以在加載圖像后再次將其自身對齊。 請參閱https://github.com/twbs/bootstrap/issues/5235#issuecomment-29806787中的評論

Answer 3

這對我有用。 預加載圖像的另一種方法，但是全部使用javascript。

var img = new Image();
img.src = imgSrc;

img.addEventListener('load', function() {
  //wait until image load is done before loading popover, 
  //so popover knows image size
    $myJQueryThumbnailImgObj.popover({
        html: true,
        trigger: "hover",
        placement: "right",
        delay: { "show": 300, "hide": 100 },
        content: "<img src='" + imgSrc + "' style='height:" + img.height + "'; width:'" + img.width + "'/>",
    });
}, false);

Answer 4

如果您的彈出窗口中有已卸載的圖像，則可能需要預加載它們。

這是一個對我有用的預加載技巧。

的HTML

<a href="#" id="show_cc_cvv_help">?</a>
<img class="preload" src="/static/img/cc_cvv.png">

的CSS

.preload {
    position: absolute;
    visibility: hidden;
}

Java腳本

$('#show_cc_cvv_help').popover({
    html: true,
    content: '<img src="/static/img/cc_cvv.png" alt="CVV Code">'
});