我预计要歇菜，mark！
概述
在使用提示框插件的时候你需要知道这些：
提示框依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js，才能使提示框起作用。
提示框需要依赖提示冒泡插件。
出于性能的原因，提示框是选择性加入的，所以你必须自己初始化它们。
标题零长度的提示框不会显示出来。
指定
container: 'body'以避免复杂组件（比如说输入框组，按钮组，等等）中的渲染问题。在隐藏的元素上触发的提示框不会起作用。
如果从一个跨多行的链接上触发提示框，提示框将居中。在
<a>上使用white-space:nowrap;可以避免这种情况。
示例：在任何地方启用提示框
在网页上初始化所有的提示框的一个途径是用data-toggle属性选中它们：
$(function () {
$('[data-toggle="popover"]').popover()
})示例：使用container选项
如果你在一个父元素上有一些样式与提示框产生干扰，你可以指定一个自定义的container，这样提示框的HTML将出现在这个元素内部了。
$(function () {
$('.example-popover').popover({
container: 'body'
})
})静态提示框
歇菜。。。
现场演示
<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>四个方向
例子是这个例子，但是我怀疑还是JS引入的不对。
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>在下一次点击时撤回
使用focus触发器，会在用户下一次点击时抹除提示框。
为dismiss-on-next-click明确标记
为了适当的跨浏览器和跨平台表现，你必须使用<a>标记。不能是<button>标记，而且<a>还必须包含一个tabindex属性。
$('.popover-dismiss').popover({
trigger: 'focus'
})用法
利用JavaScript启用提示框：
$('#example').popover(options)选项
可以利用data属性或者JavaScript传递选项。如果用data属性，请把选项名追加到data-后面，比如说写成data-animation=""。
$().popover(options) 为一个元素集合初始化提示框。
.popover('show') 显示一个元素的提示框。**在提示框真正显示之前返回给调用者**（也就是，在`shown.bs.popover`事件发生之前）。这被视为提示冒泡的一次“人为”触发。零长度标题零长度内容的提示框不会显示。
$('#element').popover('show').popover('hide') 隐藏一个元素的提示框。
**在提示框真正隐藏之前返回给调用者**（也就是，在`hidden.bs.popover`事件发生之前）。这被视为提示框的一次“人为”触发。 Copy
$('#element').popover('hide').popover('toggle') 切换一个元素的提示框。
**在提示框真正显示或隐藏之前返回给调用者**（也就是，在 `shown.bs.popover`或`hidden.bs.popover`事件发生之前）。这被视为提示框的一次“人为”触发。 Copy
$('#element').popover('toggle').popover('destroy') 隐藏并销毁一个元素的提示框。
使用委派的提示框（创建时使用了[`selector`选项](#options)）不能在后代触发元素上被单独销毁。 Copy
$('#element').popover('destroy')事件
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| animation | boolean | true | 对提示框应用一个CSS褪色过渡 |
| container | string | false | false | 向一个特定元素追加提示框。示例： |
| content | string | function | '' | 如果 如果提供了一个函数，调用这个函数时，函数的 |
| delay | number | object | 0 | 延迟显示或延迟隐藏提示框（以毫秒计）——它不会应用到人为触发类型。 如果向这个选项提供一个数字，显示和隐藏都会应用这个延迟。 对象结构是 |
| html | boolean | false | 向提示框插入HTML。如果值为false，将使用jQuery的text方法向DOM插入内容。如果你担心跨站脚本攻击的话，请使用text。 |
| placement | string | function | 'right' | 如何定位提示框：`top`、 `bottom`、`left`、`right`、`auto`。 如果用一个函数来决定placement，会调用提示框的DOM节点作为第一个参数，然后触发元素的DOM节点是第二个参数。 |
| selector | string | false | 如果提供了一个选择器，提示框将被委派给指定的目标。在实践中，它让动态添加的HTML内容也能附加提示框。看这里和一个翔实的例子。 |
| template | string | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
在创建提示框时使用HTML。 提示框的 提示框的
最外层的包裹元素必须拥有 |
| title | string | function | '' | 如果 如果提供了一个函数，调用这个函数时，函数的 |
| trigger | string | 'click' | 如何触发提示框——`click`、`hover`、`focus`、`manual`。你可以传递多个触发器，用空格隔开它们。但是`manual`不能用别的触发器结合使用。 |
| constraints | Array | 'hover focus' | 一个约束数组，传递给Tether。欲知更多请查询Tether的约束文档 |
| offsets | string | '0 0' | 提示框相对于目标的偏移，欲知更多请查询Tether的偏移文档。 |
| 事件类型 | 描述 |
|---|---|
| show.bs.popover | 当调用show实例方法时，会立即触发该事件。 |
| shown.bs.popover | 当提示框对用户来说可见时（需要等待CSS过渡完成），会触发该事件。 |
| hide.bs.popover | 当调用hide实例方法时，会立即触发该事件。 |
| hidden.bs.popover | 当提示框对用户来说终于完成隐藏时（需要等待CSS过渡完成），会触发该事件。 |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})来源：oschina
链接：https://my.oschina.net/u/199513/blog/647435