Bootstrap popover overlay not positioned correctly

Question

I am having a problem with bootstrap's popovers when inserting images. On the first click, the arrow on the left is sometimes too low. On the second click everything is ok.

var content = '<p>Have a nice day</p><img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';

$("#blob").popover({ content: content, html: true });

This occurs as well, but not so often, if the dimensions of the image are explicitly specified.

http://jsfiddle.net/34zp7hsu/

Maybe it is possible to draw the popover twice on click? Any help would be appreciated.

UPDATE

Rendering the image in a hidden div on the page as well solved the problem though I do not understand why it does not work with specified width and height on the image ...

Answer 1

your problem is one of the css rule of popover class : max-width: 276px; so you just have to add a new rule like : max-width: none;

Hope i help !