POP提示

将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提示框组件是可选的,所以 你必须自己将它们初始化才能启动生效。
  • 零长度的 titlecontent 不会显示为一个弹出提示框。
  • 指定 container: 'body'定义,以避免在更复杂的组件(如输入框组、按钮组等)中产生呈现问题。
  • 在隐藏元素上触发弹出提示框是无效(不起作用)的。
  • .disableddisabled 元素的弹出提示框触发点击按钮,必须在在外层父元素上。
  • 如果从一个跨多行的链接上触发提示冒泡,提示冒泡将居中。在<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'
  })
})

静态提示框

可以使用四个选项:顶部、右部、底部、左部对齐(指向)。

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

现场演示

<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属性。

<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=""

名称 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 的 行为属性文档

单个popovers的数据属性

如上所述,可以通过使用数据属性来指定各个提示框的选项。

方法

异步传输与转换

所有的API方法都是异步的,并开始一个转换。一旦转换开始但在结束之前,它们就返回给调用者。另外,一个转换组件的方法调用将被忽略。

请参阅我们的JavaScript文档以获取更多信息

$().popover(options)

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

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

切换元素的提示框,在popver提示框实际显示或隐藏之前返给调用者,即在 shown.bs.popoverhidden.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…
})