提示框

添加一小块叠层内容，就像iOS中常见的那样，给一些元素放置次要信息。

概述

在使用提示框插件的时候你需要知道这些：

• 提示框依赖第三方库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-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触发器，会在用户下一次点击时抹除提示框。

<a
tabindex="0"
class="btn btn-lg btn-danger bd-popover"
role="button"
data-toggle="popover"
data-trigger="focus"
title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?"
>
Dismissible popover
</a>

$('.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`事件发生之前）。这被视为提示框的一次“人为”触发。

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

.popover('toggle') 切换一个元素的提示框。**在提示框真正显示或隐藏之前返回给调用者**（也就是，在 `shown.bs.popover`或`hidden.bs.popover`事件发生之前）。这被视为提示框的一次“人为”触发。

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

.popover('destroy') 隐藏并销毁一个元素的提示框。使用委派的提示框（创建时使用了[`selector`选项](#options)）不能在后代触发元素上被单独销毁。

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

事件

如果用一个函数来决定placement，会调用提示框的DOM节点作为第一个参数，然后触发元素的DOM节点是第二个参数。this的上下文设置为提示框的实例。selectorstringfalse如果提供了一个选择器，提示框将被委派给指定的目标。在实践中，它让动态添加的HTML内容也能附加提示框。看这里和一个翔实的例子。templatestring'<div class="popover" role="tooltip"><div
class="popover-arrow"></div><h3
class="popover-title"></h3><div
class="popover-content"></div></div>'

在创建提示框时使用HTML。

提示框的title将注入到.popover-title里面。

提示框的content将注入到.popover-content里面。

.popover-arrow将变成提示框的箭头

最外层的包裹元素必须拥有.popover类。

titlestring | function''

如果title属性不存在，提供默认的title值。

如果提供了一个函数，调用这个函数时，函数的this引用被设置为附加提示框的元素。

triggerstring'click'如何触发提示框——`click`、`hover`、`focus`、`manual`。你可以传递多个触发器，用空格隔开它们。但是`manual`不能用别的触发器结合使用。constraintsArray'hover focus'一个约束数组，传递给Tether。欲知更多请查询Tether的约束文档offsetsstring'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…
})