javascript - 图像加载后弹出 Twitter Bootstrap 弹出窗口未显示在正确位置

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

Javascript

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