popover not destroyed correctly while showing

[patricklx]

The popover will not destroy properly while showing.

Here is a fiddle to demonstrate it: http://jsfiddle.net/vBUFu/20/ [edited].
Hover over the button and wait 5sec to see what i mean.
(I changed the opacity of the fade class so that the popover stays visible.)

The problem is that even with opacity 0, one cannot click on elements behind it!

It works when its manually shown, but not with events like 'hover' or 'click'.

[cvrebert]

Your fiddle is using RC 2 CSS. Please update it to use the v3.0.0 final release CSS and then re-test.

[cvrebert]

Similar to #10260.

[patricklx]

done. But still the same problem.
http://jsfiddle.net/vBUFu/20/

[cvrebert]

X-Ref: #10740

[saimeunt]

Popover hide method seems to mess up with the z index value of the popover.

I need to close all other popovers when clicking on a new one, I'm achieving this behaviour simply by triggering popovers manually : in the click function, I call toggle on the current popover then call the hide method of every popovers except the current one.
Hiding a popover when it's shown with toggle works fine, the problem is when I try to hide another popover currently shown with the hide method.

See my jsfiddle :
http://jsfiddle.net/saimeunt/3MUzq/

1. Click on Button 1.
2. Click on Button 4.
3. Click again on Button 4.
4. Now you can't click on Button 2 anymore.

As previously hinted, using .popover("hide") on a shown popover doesn't hide it properly, his opacity is set to zero however it's still there above other stuff so my guess is that z-index is not reset accordingly.

[u007]

hi,
should the hidden popup having display: none?
i notice the display: block is still on even thou the opacity: 0

[ValentinH]

I have the same problem. When we use the button to hide, it's OK, but when we use the API by calling 'hide', the element only has a 0 opacity so it messes up the other elements on the page.

[DixonDs]

I have the same issue. I believe that a popover should be removed from DOM on hide, not just hidden. But at least it should be display:none instead of display:block

[ido-ran]

I have similar project in which I create popover dynamically and when I call the destroy method the popover DOM elements remain and are not removed.

[j8]

Temporary solution (works in my case, i.e AngularJS directive with multiple position top popovers):

after: popover.hide(), place:

jQuery('.popover.fade.top').css( "display", "none", "important");

[cvrebert]

Closing as duplicate of #10260.

[dud3]

@j8 +1 this solved my problem.