Twitter Bootstrap弹出式触发器:如何设置多个触发器? [英] Twitter Bootstrap popover trigger: how to set multiple triggers?

问题描述

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

解决方案

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

I'm trying to use http://twitter.github.io/bootstrap/javascript.html#popovers. I can set the trigger to any one of click | hover | focus | manual. Is there a way to set multiple triggers? I want to use hover and focus.

解决方案

This is easy enough to accomplish by defining your own event handlers and showing/hiding the popover via the 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);

Example: http://jsfiddle.net/Xqx8P/

这篇关于Twitter Bootstrap弹出式触发器:如何设置多个触发器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！