弹出框 popover

点击按钮弹出，再点击按钮隐藏。

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="地振高冈，一派西山千古秀" title="Popover title">
  左
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="地振高冈，一派西山千古秀" title="Popover title">
  上
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="门朝大海，三合河水万年流" title="Popover title">
  下
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="门朝大海，三合河水万年流" title="Popover title">
  右
</button>

<!-- 一劳永逸，全局触发 -->
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();
});
</script>

运行一下

popover弹出框 - Options参数设置

有两种方式来进行参数设置：

• 利用data-加参数名的形式构建该元素的自定义属性，比如data-trigger=""
• 在JavaScript中使用$('#example').popover(options)方式

常用的Options有：

参数名	数据类型	默认值	说明
animation	布尔型	true	是否应用淡入淡出的动画效果
container	字符串或布尔型	false
delay	数字或者类字典型对象	0	显示或隐藏popover弹出框的延时时长，单位为毫秒；也可以对隐藏和显示的延时时长进行分别设置，例如取值{"show":1000, "hide":200}
html	布尔型	false	弹框内容是否可以是html内容，false就代表是普通文本，推荐使用false，不建议在popover弹框中插入html内容
placement	字符串或函数	"right"	popover弹出框在哪个方向上弹出，常用取值有top/bottom/left/right
selector	字符串或布尔型	false
template	字符串	'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
title	字符串或函数	""
trigger	字符串	"click"	popover弹出框的触发事件，常用的事件有 click/hover/focus/manual，不同的事件中可以组合，但是manual只能单独使用
viewport	字符串或Object对象或者函数	{ selector: 'body', padding: 0 }

示例：data-trigger="focus" 点击空白处，弹出框即可消失

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="门朝大海，三合河水万年流" title="Popover title" data-trigger="focus">
  右
</button>

运行一下

popover弹出框 - JavaScript常用方法

$("#example").popover(option)

option命令	说明
hide	隐藏popover弹出框
show	显示popover弹出框
toggle	切换popover弹出框的隐藏和显示状态
destroy	销毁当前popover弹出框组件

示例：文档加载完毕后，自动弹框

$('#example').popover( "show" );

运行一下

popover弹出框 - 事件

事件	说明
show.bs.popover	一旦触发popover弹框的show动作（显示）则触发该事件
shown.bs.popover	触发popover弹框的show动作（显示），且popover弹框已经显示完毕，则触发该事件
hide.bs.popover	一旦触发popover弹框的hide动作（隐藏）则触发该事件
hidden.bs.popover	触发popover弹框hide动作（隐藏），且popover弹框已经隐藏完毕，则触发该事件

示例：当popover弹框显示完毕后，则触发预设事件（弹出“反清复明”）

$('#example').on('shown.bs.popover', function (e) {
   alert( "反清复明" );
});

运行一下