Keep hover-triggered twitter bootstrap popover alive while selecting option from a dropdown inside the popover

Question

I'm trying to put a dropdown list inside the twitter bootstrap popover. The popover should be triggered on link's hover event and remain visible while cursor is inside the popover.

I used a code posted by @vikas devde from here to make it work, and everything works great except selecting an option from a dropdown list.

When trying to select an option, dropdown disappears.

In Firefox there is a chance to select by keyboard arrows, Chrome allows to select but hides the popover on click or on enter, in Safari everything works fine.

Here's a fiddle for illustration.

HTML:

<a id="hover-link" href="#">Hover over me</a>
<form id="form-popover" method="post">
    <label>Select some option here
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </label>
</form>

jQuery:

$(function () {
    $('#hover-link').popover({
                html: true,
                trigger: 'manual',
                placement: 'bottom',
                content: $('#form-popover').html(),
                title: "title"
            }).on("mouseenter", function () {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function () {
                    setTimeout(function () {
                        $(_this).popover('hide');
                    }, 100);
                });
            }).on("mouseleave", function () {
                var _this = this;
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(_this).popover('hide');
                    }
                }, 100);
    });
});

score 3 · Accepted Answer · edited May 23 '17 at 11:52

Appeared to be a known issue with Firefox and Chrome firing parent's "mouseleave" event when opening a dropdown. Just leaving it here for anybody having the same issue:

Thanks @Blocka and @gogobu for posting the solution here.

I've added e.target.tagName != 'OPTION' and e.target.tagName != 'FORM' conditions to original code because <form> and <option> elements fired "mouseleave" event too.

In my case the complete solution looks like this:

jsfiddle

jQuery:

$(function () {
    $('#hover-link').popover({
        html: true,
        trigger: 'manual',
        placement: 'bottom',
        content: $('#form-popover').html(),
        title: "title"
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function (e) {
            // e.fromElement and e.target.tagName hack to manage firing .popover "mouseleave" event when dropdown is open on Firefox and Chrome
            if ((typeof e.fromElement != 'undefined' && !e.fromElement.length) || (typeof e.fromElement == 'undefined' && e.target.tagName != 'SELECT' && e.target.tagName != 'OPTION' && e.target.tagName != 'FORM')) {
                setTimeout(function () {
                    $(_this).popover('hide');
                }, 100);
            }
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover('hide');
            }
        }, 100);
    });
});

score 0 · Answer 2 · answered Sep 14 '15 at 09:24

try this

$(function () {
    $('#hover-link').popover({
                html: true,
                trigger: 'manual',
                placement: 'bottom',
                content: $('#form-popover').html(),
                title: "title"
            }).on("mouseenter", function () {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function () {
                    setTimeout(function () {
                        $(_this).popover('active');
                    }, 100);
                });
            }).on("mouseleave", function () {
                var _this = this;
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(_this).popover('hide');
                    }
                }, 100);
    });
});

this is where the problem is $(_this).popover('hide'); .. You need to make it active if you dont want it to hide so by replacing hide into active.. your hover buttons will be active

The problem is clearly in `$(_this).popover('hide')` but if I change 'hide' to 'active' the popover won't close on mouseleave as it should. — Pavlo Opanasenko, Sep 14 '15 at 09:30

tofirius · Answer 3 · 2017-07-31T17:34:30.003

Apparently, Firefox allows the click event to propagate through to the popover causing the popover to dismiss. So, perhaps this is a simpler, more straightforward approach, since "active" is not a documented function for Bootstrap popovers.

$(document).on('click','select.popover-specific-select-element',function(event){
    // Hack to make sure the popover stays open when using Firefox.
    event.stopPropagation();
});

Keep hover-triggered twitter bootstrap popover alive while selecting option from a dropdown inside the popover

3 Answers3