Popover is not being displayed

Within my javascript file

 $(".filter-popover").on("click hover", function (e) {
        e.preventDefault();
        return true;
});
$(".filter-popover").popover();

And within my html:

<a class='filter-popover' href='#' data-toggle="popover" data-placement='left' data-trigger='hover click' data-content='Filters are case insensitive. Prefix a value with &lt; or &gt; to filter for values that are less than or greater than'>
    <i class="fa fa-question-circle" id='filter-info'></i>
</a>

The Popover is rendering, as I can see it in the html in the console. It seems that the class that gets generated that is .popover has some css attatched to it that looks like

:not(.show).fade {
opacity: 0;
}

When I disable this css, the popover is visible. One other thing is that the popover is within a form.

Does anybody have any idea why the popover renders but does not appear, and how I could fix that?

Thanks!

Solution

Not sure if this is the correct fix, or if this is just a workaround, but using this I was able to make it so that the opacity gets set to 1 (which makes it visible somehow) by setting

.popover.fade.left.in {
    opacity: 1;
    filter: alpha(opacity=100);
}