jquery - Twitter Bootstrap 弹出框触发器：如何设置多个触发器？

Question

我正在尝试使用http://twitter.github.io/bootstrap/javascript.html#popovers。我可以将触发器设置为任何一个click | hover | focus | manual。有没有办法设置多个触发器？我想使用悬停和焦点。

Answer 1

这很容易通过定义您自己的事件处理程序并通过 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/

Answer 2

初始化弹出框时，您可以传递多个触发器；用空格分隔它们。

   var options = {
       trigger: 'hover focus'
    }

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

Answer 3

与此问题相关：

如果有人将 Bootstrap 的弹出框与 AngularJS 一起使用（使用Angular-UI）并希望定义弹出框将在“鼠标输入时”激活但根据一个或多个事件停用，则此代码可能会有所帮助：

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 4

我们可以这样使用多个触发器：trigger="focus; click;"

Answer 5

@Denis Ivanov 正确提及的内容的参考

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

弹出框是如何触发的 - 点击 | 悬停 | 焦点 | 手动的。您可以传递多个触发器；用空格分隔它们。默认为“点击”

Answer 6

如果您使用<a>标签内的数据属性来配置弹出框，您可以简单地放置两个值，如下所示：

<a data-trigger="hover focus">

使用 Bootstrap 2 为我工作。