Popup Twitter Bootstrap Popover not showing at correct place after image load

Question

I have a problem where my pointer tag is not at the correct place after loading the image. I noticed once I hover over the image it is in the correct place, but because the image only loads after the javascript ran, it is pushing the "pointer tag" down if the image is of a certain width and height.

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

Excample of incorrect look:

Should be at the logo where the watch is.

Answer 1

That's the default behaviour.

The arrow will automatically be at the center of the box as in CSS, it's top property is 50%.

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

You need to position it manually.

Answer 2

You can also try to fix popover to align itself again after loading the image. See comment in https://github.com/twbs/bootstrap/issues/5235#issuecomment-29806787

Answer 3

This worked for me. Another way to preload the image, but all in 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

If you've got unloaded images in your popover, you may need to preload them.

Here's a little preloading trick that worked for me.

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">'
});