Twitter Bootstrap popover trigger: how to set multiple triggers?

Question

I\'m trying to use http://twitter.github.io/bootstrap/javascript.html#popovers. I can set the trigger to any one of click | hover | focus | manual. Is there a w

Answer 1

Related to this question:

if anyone uses Bootstrap's popover with AngularJS (using Angular-UI) and wants to define that a popover will be activated "on mouse enter" but deactivated according to one or more events, this code might be helpful:

app.config(function ($tooltipProvider) {
    // when the user either leaves the element or clicks on it, the tooltip/popover will go off.
    $tooltipProvider.setTriggers({
        'mouseenter': 'mouseleave click',
        'click': 'click',
        'focus': 'blur'
    });
}

Answer 2

When initializing your popover, you may pass multiple triggers; separate them with a space.

   var options = {
       trigger: 'hover focus'
    }

    $('#has-popover').popover(options);

Answer 3

The reference of what mentioned correctly by @Denis Ivanov

Bootstrap 3.0 (http://getbootstrap.com/javascript/#popovers)

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. Default is 'click'

Answer 4

If you use data attributes inside your <a> tag to configure your popover, you can simply put both values, like this:

<a data-trigger="hover focus">

Works for me using Bootstrap 2.

Answer 5

This is easy enough to accomplish by defining your own event handlers and showing/hiding the popover via the API:

HTML:

<input id='no-popover' type='text' />
<input id='has-popover' type='text' placeholder='hover or focus me' />

JavaScript:

var showPopover = function () {
    $(this).popover('show');
}
, hidePopover = function () {
    $(this).popover('hide');
};

$('#has-popover').popover({
    content: 'Popover content',
    trigger: 'manual'
})
.focus(showPopover)
.blur(hidePopover)
.hover(showPopover, hidePopover);

Example: http://jsfiddle.net/Xqx8P/