I am using Bootstrap plugin with jQuery.
Having issues with Hover Flickering for Bootstrap Popover... I have tried with below options but issue is still exists
Options Tried:
$('.article-content').popover();
$( document ).ready(function() { $('.article-content2').popover(); });
data-container="body"
HTML
<article>
<span class="article-content" href="#" data-content="Popover with Hover" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Mouse Over</span>
<span class="article-content2" href="#" data-content="Popover with with Document Ready" rel="popover" data-placement="bottom" data-original-title="Title 2" data-trigger="hover">Mouse Over with Document Ready</span>
<span class="article-content2" href="#" data-content="Popover with with Document Ready & data-container=body" rel="popover" data-placement="bottom" data-original-title="Title 3" data-trigger="hover" data-container="body">Mouse Over with Document Ready & data-container="body"</span>
</article>
CSS
body{margin:50px;}
article span{background:#ddd;width:100%;float:left;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:5px;text-align:center;cursor:pointer;margin-bottom:1px;}
jQuery
$('.article-content').popover();
$( document ).ready(function() {
$('.article-content2').popover();
});
FIDDLE
Thanks to @mijopabe, We just need to add "fade" CSS class if we do not have one. Exactly dont know the relation, but it works like a Champ.
HERE IS WORKING FIDDLE
CSS Class to be Added Extra to Remove Flickering
.fade {
opacity: 0;
-webkit-transition: opacity 0s linear;
-moz-transition: opacity 0s linear;
-ms-transition: opacity 0s linear;
-o-transition: opacity 0s linear;
transition: opacity 0s linear;
}
To solve the flickering issue on hover you can add this class on the popover
Refer to this github issue for more info