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

此组件的动画效果取决于prefers-reduced-motion 媒体查询. 请参阅我们的 辅助功能文档的简化动作部分.

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

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

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

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

请注意,出于安全原因,无法使用数据属性提供sanitize, sanitizeFnwhiteList选项.

请注意,出于安全原因,无法使用数据属性提供sanitize,sanitizeFn和whiteList选项。
Name Type Default Description
animation boolean true Apply a CSS fade transition to the popover
container string | element | false false

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

content string | element | function ''

Default content value if data-content attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

delay number | object 0

Delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { "show": 500, "hide": 100 }

html boolean false Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'right'

How to position the popover - auto | top | bottom | left | right.
When auto is specified, it will dynamically reorient the popover.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.

selector string | false false If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-header.

The popover's content will be injected into the .popover-body.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.

title string | element | function ''

Default title value if title attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

trigger string 'click' How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
offset number | string 0 Offset of the popover relative to its target. For more information refer to Popper.js's offset docs.
fallbackPlacement string | array 'flip' Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs
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.

单个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…
})