弹出框(Popover)插件

Bootstrap 弹出框的文件与实例,类似 iOS 上的风格,可加在网页上的任何元素上。

概览

使用弹出框插件时应了解的事情如下:

都明白了?太好了,让我们通过一些例子看他们是如何运作的。

实例:在任何地方添加弹出框

在页面上初始化所有弹出框的一种方法是通过它们的 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" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle 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> 标签,而不是 <button> 标签,你还必须包含一个 tabindex 属性。

Dismissible popover
<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 的元素是不能产生互动的,这意味用户不能使用 hover 及点击触发弹出(或工具提示),如果想要添加,你使用 <div><span> 包裹并覆盖 pointer-events 在禁用的属性上。

对于禁用的弹出框,你也许倾向使用 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)

选项

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

名称 类型 默认 描述
animation boolean true 将 CSS 渐变应用到弹出框
container string | element | false false

将弹出框加到特定元素。例如:container: 'body'。该选项特别有用,因为它允许你将触摸屏定位在触发元素附近的文字内容 - 这将防止在画面调整大小期间弹出的提示远离触发元素。

content string | element | function ''

如果 data-content 属性不存在,则为预设内容值。

如果给出一个函数,它将被调用,其this 引用设置为弹出框附加到的元素。

delay number | object 0

显示和隐藏弹出框的延迟(ms) - 不适用于手动触发类型

如果提供了一个数字,则将延迟应用于隐藏/显示

事件结构是:delay: { "show": 500, "hide": 100 }

html boolean false 将HTML插入到弹出框中。 如果是 false,那麽将使用 jQuery 的 text 方法将内容插入到 DOM 中。如果你担心 XSS 攻击,请使用文字。
placement string | function 'right'

如何定位彈出提示框 - auto | top | bottom | left | right。
指定 auto 时,将动态重新定位弹出框。

当函数用于确定位置时,将使用弹出框 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

title string | element | function ''

如果 title 属性不存在,则为预设标题值。

如果给出一个函数,它将被调用,其 this 引用设置为动态提示框附加到的元素。

trigger string 'click' 如何触发动态提示框 - click | hover | focus | manual。 你可以传递多个触发器;将它们与空格分开。`manual` 不能与任何其他触发器组合。
offset number | string 0 动态提示框相对于其目标的偏移。更多信息,请参阅 Popper.js 的 偏移文档
fallbackPlacement string | array 'flip' 指定动态提示框将在调回时使用哪个位置。 有关更多信息,请参阅 Popper.js 的 行为文档
boundary string | element 'scrollParent' Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

各弹出框的data属性

如上所述,可以通过使用data属性来替代指定各个弹出框的选项。

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

$().popover(options)

元素集合的弹出框初始化。

.popover('show')

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

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

.popover('hide')

隐藏元素的弹出框。在弹出框实际被隐藏之前返回给调用者 (即,在 hidden.bs.popover 事件发生之前)。这被认为是弹出框的 “手动” 触发。

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

.popover('toggle')

切换元素的弹出框。 在popover实际显示或隐藏之前返回给调用者(即,在 shown.bs.popoverhidden.bs.popover 事件发生之前)。 这被认为是弹出框的 “手动” 触发。

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

.popover('dispose')

隐藏和销毁一个元素的弹出框。使用委託(the selector option) 创建)的弹出框不能在后代触发元素上被单独销毁。

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

.popover('enable')

给一个元素的弹出框显示的功能。 弹出框是在预设情况下添加的。

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

.popover('disable')

删除要显示元素的弹出框的功能。只有在重新添加后,才能显示弹出框。

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

.popover('toggleEnabled')

切换弹出框的显示或隐藏元素功能。

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

.popover('update')

更新弹出框的位置。

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

事件

事件类型 描述
show.bs.popover 当调用 show 实例方法时,此事件会立即触发。
shown.bs.popover 当弹出框显示时,会触发此事件(待 CSS 转换完成)。
hide.bs.popover 当调用 hide 实例方法时,会立即触发此事件。
hidden.bs.popover 当弹出框隐藏后,会触发此事件(将等待CSS转换完成)
inserted.bs.popover 当将提示范本加到 DOM 时,此事件在 show.bs.popover 事件之后触发。
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})