JS bootstrap popover click + mouseenter - mouseleave conflict

При наведении и убирании курсора все ОК, а вот когда нажимаю кнопку не уводя курсор с кнопки, то поповер пропадает, хотя не должен, в чем проблема?

<button class="js-test">TEST</button>
<div style="display: none;">content</div>

$(document).on({
    mouseenter: function () {
        var $this = $(this);
        $this.popover({
            animation: false,
            html: true,
            placement: 'top',
            content: function () {
                return 'xxx';
            }
       }).popover('show');
    },
    mouseleave: function() {
        var $this = $(this);
        $this.popover('hide');
    },
    click: function () {
        var $this = $(this);
        $this.next().toggle();
     } 
}, '.js-test');

JSFIDDLE