Bootstrap popover not working on second click

Question

Similar to this question, my popover is not shown on the second, fourth, sixth ... click, while I'm trying to fade it out. My code:

$('[data-toggle="popover"]').popover({
    placement: 'bottom',
    delay: {
        show: 50
    }
});

$('[data-toggle="popover"]').click(function () {

    setTimeout(function () {
        $('.popover').fadeOut('slow');
    }, 1000);
});

The answer provided in the link, claims it is a Bootstrap 3.3.5 bug. Although, I'm working with bootstrap 3.3.7, the proposed solution does not do the trick:

if ($.fn.popover.Constructor.VERSION == "3.3.7") {
     $('[data-toggle="popover"]').on("hidden.bs.popover", function() {
          $(this).data("bs.popover").inState.click = false
     })
}    

To see the bug in action: JSFiddle

Answer 1

Seems the bug isn't fixed yet in 3.3.7, but the proposed solution actually works. You still need to hide the popover with .popover('hide'), instead of just fading out. The following will do the trick:

$('.popover').fadeOut('slow').popover('hide');

Use this in combination with:

if ($.fn.popover.Constructor.VERSION == "3.3.7") {
    $('[data-toggle="popover"]').on("hidden.bs.popover", function() {
        $(this).data("bs.popover").inState.click = false
    })
}