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

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

Answer 1

通过定义自己的事件处理程序并通过API显示/隐藏弹出窗口，这很容易实现：

HTML：

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

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

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

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

Answer 5

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

使用Bootstrap 2为我工作。