使用popover提示框插件时需要注意的事项：

• popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js（这两个脚本中已经包含了Popper.js可以直接运行弹出提示框）。
• popover提示框组件依赖于 tooltips提示冒泡插件 提供状态提示框。
• 如果你要自行编译JS，请 包括 util.js 脚本文件。
• 由于性能原因，popover提示框组件是可选的，所以 你必须自己将它们初始化 才能启动生效。
• 零长度的 title 和 content 不会显示为一个弹出提示框。
• 指定 container: 'body'定义，以避免在更复杂的组件（如输入框组、按钮组等）中产生呈现问题。
• 在隐藏元素上触发弹出提示框是无效（不起作用）的。
• .disabled 或 disabled 元素的弹出提示框触发点击按钮，必须在在外层父元素上。
• 如果从一个跨多行的链接上触发提示冒泡，提示冒泡将居中。在 <a> 上使用 white-space: nowrap; 可以避免这种情况。
• 必须先隐藏弹出提示框，然后才能从DOM中删除相应的元素（以完成弹出关闭完整行为）。

示例：在任意位置启用弹出窗口

$(function () {
    $('[data-toggle="popover"]').popover()
})

示例：使用 container 容器选项

$(function () {
    $('.example-popover').popover({
        container: 'body'
    })
})

演示示例

点击体验 popover提示框效果

四个方向

Popover on 顶部 Popover on 右侧 Popover on 底部 Popover on 左侧

下次点击时关闭

使用 focus 触发器在用户下次单击当前元素之外的其他元素时关闭弹出窗口。

下次点击时关闭

禁用的元素

禁用的按钮

用法

利用JavaScript启动提示泡:

$('#example').popover(options)

选项

可通过数据属性或JavaScript传递选项参数。对于数据属性，请将选项名称附加到 data- 上，如 data-animation=""。

名称	Type类型	默认值	描述
animation	boolean	true	将CSS淡入淡出转换应用于popover提示框。
container	string | element | false	false	向一个特定元素追加提示框，如 container: 'body'。这个选项候特别有用，因为它允许你将弹出提示定位在触发元素附近的内容中--这将防止在窗口调整大小的时候，提示框飘到远离（撑出）触发元素的位置。
content	string | element | function	''	如果 data-content 属性不存在，提供默认的content值。 如果提供了一个函数，调用这个函数时，函数的 this 引用被设置为附加提示框的元素。
delay	number | object	0	延迟显示和隐藏弹出（ms） - 不适用于手动触发类型。 如果向这个选项提供一个数字值，显示和隐藏都会应用这个延迟。 Object对象结构是: delay: { "show": 500, "hide": 100 }
html	boolean	false	向提示框插入HTML。如果值为false，将使用jQuery的text方法向DOM插入内容。如果你担心跨站脚本攻击的话，请使用text。
placement	string | function	'right'	如何定位提示框：auto | top | bottom | left | right。 如果指定了"auto"，它会动态地调整提示框的位置。举个例子，如果placement是"auto left"，提示框将尽可能地显示在左侧，否则显示在右侧。 如果用一个函数来决定placement，会调用提示框的DOM节点作为第一个参数，然后触发元素的DOM节点是第二个参数。this 将被设置为提示框的实例。
selector	string | false	false	如果提供了一个选择器，提示框将被委派给指定的目标。在实践中，它让动态添加的HTML内容也能附加提示框。请参阅 这里文档 以及 一个翔实的示例。
template	string	'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'	在创建提示框时使用基本HTML。 动态提示框的 title 值将被注入到 .popover-header 中。 动态提示框的 content 值将被注入到 .popover-body 中。 .arrow 将变成提示框的箭头。 最外层的包裹元素必须拥有 .popover class样式定义
title	string | element | function	''	如果 title 属性不存在，提供默认的title值。 如果提供了一个函数，调用这个函数时，函数的 this 引用被设置为附加提示框的元素。
trigger	string	'click'	如何触发提示框 - click | hover | focus | manual。你可以传递多个触发器，用空格隔开它们。但是`manual`不能与别的触发器结合使用。
offset	number | string	0	提示框相对于目标的偏移，欲知更多请查询 Tether的偏移文档。
fallbackPlacement	string | array	'flip'	指定动态提示框在回调时使用哪个位置，有关更多信息请参阅 Popper.js 的 行为属性文档。

方法

$().popover(options)

元集集团的弹出提示框初始化。

.popover('show')

显示一个元素的提示框，在弹出实际显示之前返回给调用者（即在shown.bs.popover 事件发生前)，这被认为是弹出提示框的手动触发，标题和内容为弹出提示框不显示。

$('#element').popover('show')

.popover('hide')

隐藏元素的提示框，在弹出提示框实际被隐藏之前返回给调用者（即在 hidden.bs.popover 事件发生前），这被认为是弹出提示框的手动触发。

$('#element').popover('hide')

.popover('toggle')

切换元素的提示框，在popver提示框实际显示或隐藏之前返给调用者，即在 shown.bs.popover 或 hidden.bs.popover 事件发生前，这被认为是弹出提示框的手手动触发触发。

$('#element').popover('toggle')

.popover('dispose')

隐藏和销毁一个元素的提示框，使用委托授权 (使用the selector option创建)的提示框不能在后代触发元素不被单独销毁。

$('#element').popover('dispose')

给一个元素的提示框显示能力，提示框在默认情况下是启用的。

$('#element').popover('enable')

.popover('disable')

删除要显示元素的提示框，只有在重新启用后，才能显示出提示框。

$('#element').popover('disable')

.popover('toggleEnabled')

切换提示窗口的显示或隐藏功能。

$('#element').popover('toggleEnabled')

.popover('update')

更新元素的提示框的位置。

$('#element').popover('update')

Events事件

事件	描述
show.bs.popover	当调用 show 实例方法时，此事件立即触发。
shown.bs.popover	当提示框显示时，会触发此事件（待CSS转换过渡完成）。
hide.bs.popover	当调用 hide 实例方法时，此事件立即触发。
hidden.bs.popover	当提示框隐藏后，会触发此事件（待CSS转换过渡完成）。
inserted.bs.popover	当提示框对用户来说最终完成隐藏时（需要等待CSS转换过渡完成），会触发该事件。当事件弹出模板被添加到DOM时，show.bs.popover事件被触发。

$('#myPopover').on('hidden.bs.popover', function () {
    // do something…
})