Twitter Bootstrap Popover hides immediately after show

Question

I am trying to use Bootstrap popovers for error showing. The code works well only after first click on the button. During next clicks popover is showing but disappear immediately.

Added simple helper for popover re-usage:

var popoverHelper = function (selector) {
    var $element = $(selector);
    $element.popover({
        placement: "bottom",
        trigger: 'manual'
    });
    return {
        showPopover: function (text) {
            $element.attr('data-content', text);
            $element.popover('show');
        },
        hidePopover: function () {
            $element.popover('hide');
        },
        destroyPopover: function () {
            $element.popover('destroy');
        }
    };
};

Using helper:

var pHelper = popoverHelper('#postInput');

$('#postButton').click(function (e) {
    e.preventDefault();
    // hide open popover if open
    pHelper.hidePopover();
    ...
    // some functionality
    ...
    // show popover if some errors  
    pHelper.showPopover('error occurs!!');
});

jQuery used - 2.1.1, Twitter Bootstrap - 3.1.1.

Full sample at jsfiddle .

Small note: If I call popover destroy and if I do popover re-init on show, all works well. But I think it is not optimal.

Jsfiddle sample.

Answer 1

Check this Demo Fiddle

A better solution would be to hide popover on user action on the error field.

$('input').focus(function(){
     pHelper.hidePopover();
});