Bootstrap popover manual close requires two clicks to reopen [duplicate]

Question

I've got a Bootstrap popover which contains an element with JS that when clicked, closes the popover using the manual method as shown on the Bootstrap website, i.e.

$('#element').popover('hide')

However, it then takes two clicks on the element the popover is opened from to re-open it. It's as if it still thinks the popover is on show and so the first click is to toggle it closed and the second click then toggles it open again. Does anyone know how to properly close a popover using JS to avoid this? I've created the following fiddle that demonstrates the problem.

http://jsfiddle.net/fxqzn4xd/1/

Thanks very much.

Update: This issue isn't a duplicate of the proposed question

Thanks as always to the SO community for keeping the place tidy and relevant. However, this isn't a duplicate of the proposed question. The problem in that question was that the popovers weren't initialised until the first click. Therefore, the first click did not open the popover, but did initialise it so the second and all subsequent clicks worked.

That is not the problem I found. Popovers are initialised on page load so my first click does open the popover. When closed using the manual .popover('hide') method, the second click then does not work. i.e. every other click works in my scenario. These are different issues caused by different problems. The issue in the linked post is to initialise popovers before the first click, which I already do.

I reported the issue I found on the twbs bootstrap project on GitHub and it turns out it is a known bug, first reported in version 3.3.5 back in July. It had a milestone fix of 3.3.6 but this slipped (3.3.6 came out recently) and now has a milestone of 3.3.7. Full details on Github here:

Calling .popover('hide') prevents popover from open on next click #18860

Good news though, there is a simple workaround that can be applied while waiting for it to be committed to 3.3.7. I'll post it as a solution.

Update 2 Agreed: this is a duplicate of the newly proposed 'duplicate of' question. Looks like the asker encountered the issue just before me! I'll leave the question here though as clearly I (and others) didn't find that one at the time of looking so hopefully it can be of help.

Answer 1

Thanks go to GitHub user 'julesongithub' for providing this workaround. Putting this on the same page as a popover you wish to close using .popover('hide') solves the issue. Essentially it works by resetting the 'inState.click' variable for the popover which the hide method isn't doing.

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover").inState.click = false;
});

Answer 2

The workaround I use is the click() function on the element that fires the popover, because of the following rationale: You just want to 'hide' the popover when it is being shown and the element to show the popover is also the element to hide it. That being said, click() will make it disappear. Instead of

$('#element').popover('hide')

I use

$('#element').click()

It works well so far...