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

【问题标题】：Popup Twitter Bootstrap Popover not showing at correct place after image load图像加载后弹出 Twitter Bootstrap 弹出窗口未显示在正确位置
【发布时间】：2013-06-05 00:36:29
【问题描述】：

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

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

错误外观示例：

应该在手表所在的标志处。

【问题讨论】：

把它作为答案，我会给你投票。
好的，将其作为答案发布。

标签： javascript twitter-bootstrap popover

【解决方案1】：

这是默认行为。

箭头将自动位于框的中心，就像在 CSS 中一样，它的 top 属性是 50%。

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

您需要手动定位它。

【讨论】：

【解决方案2】：

您也可以尝试修复弹出框以在加载图像后再次对齐。见https://github.com/twbs/bootstrap/issues/5235#issuecomment-29806787中的评论

【讨论】：

【解决方案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);

【讨论】：

【解决方案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">'
});

【讨论】：