I implementing this in spring mvc web project, bootstrap popover comes on click of help icon.
On the other hand, at the first click on the icon; the popover opens and moves away from the help icon. after closing it, re-clinking, it correctly places the popover.
When I change the click, by a hover, on the first pass, the popover appears for a few moments barely seizable, the popover away from the help icon, then it returns to its position correctly.
If you look at this GIF image, you will understand better.
https://www.afnay.com/images/GIF.gif
I use JSP with JSTL.
I copy, all the code, without any difference, on plunker, and it works! The code is on this plunker. https://next.plnkr.co/edit/bcVtCYCpXgScBKcD
the difference, is juste i use tomcat 9 and JSP instead HTML.
The problem is coming from picture in popover, when i change to use popover content with hided content, it work fine
<div id="popover-content-logout" style="display:none">
<img class="img-responsive" src="/ressources/images/image-goes- here.jpg" style="max-height:250px;" />
</div>
// popover declaration ...
content: function() {
var id = $(this).attr('id')
return $('#popover-content-logout').html();
},
I think that the loading of the image by tomcat takes time, knowing that in local I do not use the base 64 on the image.