Twitter Bootstrap Question posted in

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

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);
    });
});
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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);
    });
});

  2. 0

    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

    Login or Signup to reply.
  3. 0

    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();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search