Twitter Bootstrap Popover hides immediately after show

2
votes

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.

1
javascriptjquerytwitter-bootstrap
Is this what you want jsfiddle.net/VX7As/2 - Shaunak D
I dont see any reason hiding the popover on click event, If it is already shown. - Shaunak D
Instead of hiding it on click, i guess you should hide in on focus() of input - Shaunak D
@shaunakde User can click button several times and different errors can be shown. E.g. input field is empty, so popover with error will be shown. User fills input field and clicks button again, popover with error should disappear and popover with success should appear. - Gravedigger

1 Answers

1
votes

Check this Demo Fiddle

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

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