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

与此问题相关：

如果有人在AngularJS中使用Bootstrap的弹出窗口（使用Angular-UI）并且想要定义弹出窗口将激活＆＃34;鼠标输入＆＃34;但根据一个或多个事件停用，此代码可能会有所帮助：

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正确提到的内容的参考

Bootstrap 3.0（http://getbootstrap.com/javascript/#popovers）

如何触发弹出窗口 - 单击|悬停|焦点|手册。你可以传递多个触发器;用空格隔开它们。默认为“点击”

Answer 6

如果您在<a>标记内使用数据属性来配置弹出窗口，则只需将两个值都放入即可，如下所示：

<a data-trigger="hover focus">

使用Bootstrap 2为我工作。

Twitter Bootstrap popover触发器：如何设置多个触发器？

6 个答案: