Bootstrap 2.3.1 popover causing parent modal to close

Question

I'm running into an issue where I'm displaying some data in a Bootstrap modal. This data contains an icon which I'm turning into a popover. When I hover over the icon, the popover displays and everything works correctly, but when I mouse away from the icon, not only does the popover close, but the parent modal closes also.

I think this is the same issue as described here. However, the posted solution does not work for me. I'm capturing the popover's "hidden" event, but neither setting e.cancelBubble = true or calling e.stopPropagation() stops the parent modal from closing.

I don't have my code in front of me at the moment, but here is a rough mockup based on my general recollection...

HTML

<!-- ko with: myFoo -->
<div class="modal hide fade" data-bind="visible: isOpen">
    <div class="modal-header">
        <button type="button" class="close" data-bind="click: close">&times;</button>
        <h3>Title Bar!</h3>
    </div>
    <div class="modal-body">
        <!-- dynamically generated modal content goes here, including... -->
        <table>
            <tr>
                <td data-bind="popover: $data">
                    <i class="icon-question-mark" data-content="la la la..." />
                </td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-bind="click: close">Close</a>
    </div>
</div>
<!-- /ko -->

Knockout Custom Binding Handler

ko.bindingHandlers.popover = {

    init: function(element)
    {
        $(element).children().andSelf().on("mousenter", "[data-content]"function() {
            var options = {...}
            $(this).popover(options).on("hidden", function(e) {
                e.cancelBubble = true;
                e.stopPropagation();
            });
        });
    }
};

Does anyone have any ideas / suggestions on how to fix this?

We can't really suggest anything unless you edit your post and include your code or, in addition, create a [JSFiddle](http://jsfiddle.net) so that we can provide feedback. — nickhar, Jul 11 '13 at 23:08

DrewB · Answer 1 · 2014-04-07T16:48:58.580

3

Credit goes to afanasy who mentioned this as a comment:

$("[data-toggle=popover]").on("hidden", function (e) {
   e.stopPropagation();
});

note: 'hidden' instead of 'hide'. This is for bootstrap 2.3.2.

edited Apr 07 '14 at 16:48

answered Mar 04 '14 at 21:01

DrewB

3,231
24
22

score 2 · Answer 2 · answered Oct 12 '13 at 12:29

2

$("[data-toggle=popover]").on("hide", function (e) {
    e.stopPropagation();
});

solved the issue for me

answered Oct 12 '13 at 12:29

Paweł Staniec

3,151
3
29
41

score 0 · Accepted Answer · answered Jul 12 '13 at 16:00

turns out that I needed to capture the on "hide" event instead of on "hidden", as the latter occurs AFTER the modal is already closed... see below for final solution:

Knockout Custom Binding Handler

define ["jquery", "ko", "bootstrap"], ($, ko) ->

    ko.bindingHandlers.popover =

        init: (element) ->

            $(element).children().andSelf().filter("[data-content]").popover()

            $(element).children().andSelf().on "hide", "[data-content]", (e) ->
                e.stopPropagation?()
                return

Bootstrap 2.3.1 popover causing parent modal to close

HTML

Knockout Custom Binding Handler

3 Answers3

Knockout Custom Binding Handler