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?

score 2 · Answer 1 · answered Mar 20 '17 at 10:54

The reason this is happening is because Bootstrap absolute positions the popover on the document as soon as it is called. Then the image is loaded changing the popover height - BUT, the popover is not repositioned.

You can set a min height for the popover so that it doesn't change height and therefore doesn't need to be repositioned. Based on your example image, change css to:

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

Jackson · Accepted Answer · 2017-03-20T11:11:25.313

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

score 0 · Answer 3 · answered Sep 25 '18 at 17:43

My solution is just to show/hide the tooltip on initialization. Make sure to turn off animation or else there will be a flash of content. If you need animation, you can turn it back on after .tooltip('hide')

$('.xyz').tooltip({
    title: "xyz <img src='https://www.idk.com/test.png'alt='blah'/>", 
    html: true,
    placement: 'auto',
    animation: false
}).tooltip('show').tooltip('hide') //.data('bs.tooltip').options.animation=true

Bootstrap popover offset on first hover

3 Answers3