Popup Twitter Bootstrap Popover在图像加载后没有显示在正确的位置

Question

我有一个问题，我的指针标签在加载图像后不在正确的位置。 我注意到，一旦我将鼠标悬停在图像上它位于正确的位置，但因为图像仅在javascript运行后加载，所以如果图像具有一定的宽度和高度，它会向下推“指针标记”。

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

外观不正确的示例：

应该在手表的标志处。

Answer 1

这是默认行为。

箭头将自动位于框的中心，就像在CSS中一样，它的顶级属性为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;
}

的Javascript

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