Click the select tag option. Bootstrap popover closes

Question

I don't know english. I'm sorry to exchange meaningless phrases.

Click on the Select tag option. Bootstrap popover closes.

Jsfiddle

Note: Problem mozilla firefox browser.

// Bootstrap Popover
$('body').popover({
    selector: '[data-popover]',
    html: true,
    trigger: 'click hover',
    title: function() {
        return $('.select_box').html();
    },
    content: '...',
    placement: 'bottom',
    delay: {
        show: 50,
        hide: 400
    }
});

<button class='btn btn-primary' data-popover="true">hover here</button>


<div class="select_box hidden">
    <select class="form-control">
        <option>Day</option>
        <option>Week</option>
        <option>Month</option>
        <option>...</option>
    </select>
</div>

Answer 1

select elements have inconsistent behavior across browser, and the related events can be triggered in different moments.

Mantaining the jQuery one way you can check if the current target triggering the mouse leave is a select and if so rebind the mouseleave handler.

Code:

if (obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function () {
        //We entered the actual popover – call off the dogs
        clearTimeout(timeout);

        var bindLeave = function () {
            container.one('mouseleave', function (e) {
                if ($(e.target).is('select')) {
                    bindLeave();
                    return;
                }
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        }

        bindLeave();
    })
}

Demo: http://jsfiddle.net/IrvinDominin/tskf0eoL/