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.