POP提示 (Popover)

将Bootstrap插件（如同iOS的渐变模态提示）添加到网站上的任何元素上，这是演示实例和设计文档。

概览

使用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中删除相应的元素（以完成弹出关闭完整行为）。

都记住了？非常棒，下面让我们通过一系列的实例来了解其运作机理。

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

One way to initialize all popovers on a page would be to select them by their data-toggle attribute:

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

示例：使用 container 容器选项

当你在一个父元素上有一些样式与提示框产生样式干扰，你可以指定一个自定义的container容器，这样提示框的HTML将出现在这个元素内部了。

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

现场演示

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点击体验 popover提示框效果</button>

四个方向

<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" 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'
})

禁用的元素

具有 disabled 属性的元素不是交互式的这意味着用户不能悬停或点击它们来触发弹出窗口（或工具提示）。 作为一种解决方法，您需要从包装器<div> or <span>中触发弹出窗口，并覆盖disabled元素上的指针事件。

对于禁用的弹出式触发器，您也可能更喜欢 data-trigger="hover" ，以便弹出窗口显示为用户的直接视觉反馈，因为他们可能不希望单击禁用的元素。

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

用法

利用JavaScript启动提示泡:

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

选项

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

方法

$().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事件

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