10

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.

Kate
  • 1,556
  • 1
  • 16
  • 33
  • is there a reason why you aren't putting the popover content in the data-content variable on the 'show' button? – Whiplash450 Nov 18 '15 at 15:43
  • Yeah: on the fiddle, just to keep it as similar to the real site. On the real site it's because the popover content contains html and dynamically loaded content which didn't seem possible with the data-content attribute. The JS that moves it from a hidden element on the page was originally taken from the bootstrap site but then the trick of copying it back after closing the popup means the elements persist and next time the popover opens, it's not create fresh. – Kate Nov 18 '15 at 16:04
  • you can specifiy html or dynamic content for the popover either when you set it up or later by $("#popover").popover({ html: true, content: "dynamic content here!" }); It doesn't help with the double clicking issue but FYI :) – Whiplash450 Nov 18 '15 at 16:08
  • Thanks all the same! – Kate Nov 18 '15 at 16:21

3 Answers3

9

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;
});
Kate
  • 1,556
  • 1
  • 16
  • 33
9

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...

JoseAriel
  • 91
  • 1
  • 3
4

I fixed this by changing the trigger option when instantiating the popover.

$('#element').popover({ trigger: 'manual' });

Note that the this option requires you to both show and hide the popover.

Source Thread

More popover options

Community
  • 1
  • 1
sharkbaitoohaha
  • 51
  • 3