Twitter Bootstrap popover trigger: как установить несколько триггеров?

Я пытаюсь использовать http://twitter.github.io/bootstrap/javascript.html#popovers. Я могу установить триггер на любой click | hover | focus | manual click | hover | focus | manual click | hover | focus | manual. Есть ли способ установить несколько триггеров? Я хочу использовать зависание и фокус.

Ответы

Ответ 1

Это достаточно легко сделать, определив свои собственные обработчики событий и показывая/скрывая popover через 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);

Пример: http://jsfiddle.net/Xqx8P/

Ответ 2

При инициализации вашего popover вы можете передавать несколько триггеров; отделите их пространством.

   var options = {
       trigger: 'hover focus'
    }

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

Ответ 3

В связи с этим вопросом:

если кто-то использует Bootstrap popover с AngularJS (используя Angular-UI) и хочет определить, что popover будет активирован "при вводе мыши", но деактивирован в соответствии с одним или несколькими событиями, этот код может быть полезен:

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

Ответ 4

Ссылка на то, что правильно сказано @Denis Ivanov

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

Как запускается popover - нажмите | парить | фокус | руководство. Вы можете передавать несколько триггеров; отделите их пространством. По умолчанию используется 'click'

Ответ 5

Если вы используете атрибуты данных внутри тега <a> для настройки вашего popover, вы можете просто поместить оба значения, например:

<a data-trigger="hover focus">

Работает для меня с использованием Bootstrap 2.