Bootstrap popover offset on first hover

Question

I hope someone can provide a solution for this problem. My situation is that I've got a link that has a bootstrap popover effect, everytime you hover over it, it shows an image. But the problem is that the popover container is always offset on the first time you hover over the link. My Code:

My own code is this:

 <a href="{% url 'consilium:detail' movie.slug %}" class="thumbnail title-link" {% if movie.image %} data-toggle="popover" data-placement="left" data-full="{{movie.image.url}}" {% endif %}>
   <span class="flex-input">
     <input class="get-title" value="{{ movie.title }}" form="movie{{ forloop.counter }}" name="title" readonly/>
   </span>
 </a>

 body .popover {
   max-width: 240px;
 }

 .hover-image {
   width: 180px;
 }

-

 $(document).ready(function() {
  $('[data-toggle="popover"]').popover({
    container: 'body',
    html: true,
    placement: 'left',
    trigger: 'hover',
    content: function() {
        var url = $(this).data('full');
        return '<img class="hover-image" src="' + url + '">'
    }
 });
});

and here is a live example:

Fiddle

Anyone knows how to fix that?

Answer 1

The problem is that the popover is rendered before the image has downloaded.

To solve this, you could use the manual option in the popover plugin to define a custom hover action to show the popover after the image has loaded like this:

$this.on('mouseenter', function(){
    var image = new Image();
    image.onload=function(){
        $this.popover('show');//Show popover after image loads
    }
    image.src=url; //Preload image in memory
    }).on('mouseleave', function(){
        $this.popover('hide');
    });
});

See here for the update fiddle