弹出框 | Popovers

向站点上的任何元素添加Bootstrap弹出的文档和示例，例如在IOS中找到的文件和示例。

概述

使用popover插件时要知道的事情：

弹出式程序依赖于第三党的图书馆Popper.js用于定位。你必须包括popper.min.js在引导.js或使用bootstrap.bundle.min.js/bootstrap.bundle.js其中包含Popper.js，以便弹出程序能够工作%21。

爆米花需要工具提示插件作为一种依赖。

如果从源头构建我们的JS，要求util.js...

弹出是出于性能原因而选择的，所以你必须自己初始化...

零长title和content值将永远不会显示出一个弹出。

指定container: 'body'为了避免在更复杂的组件(如我们的输入组、按钮组等)中呈现问题，%29。

触发隐藏元素的弹出将无法工作。

爆米花.disabled或disabled元素必须在包装器元素上触发。

当从跨越多行的锚触发时，弹出式将集中在锚的总体宽度之间。使用white-space: nowrap;你的<a>为了避免这种行为。

在从DOM中删除相应的元素之前，必须隐藏弹出项。

继续阅读，看看如何使用一些例子。

示例：在任何地方启用弹出式

初始化页面上所有弹出框的一种方法是根据它们的data-toggle属性：

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

示例：使用`container`期权

当父元素上有一些与弹出程序有干扰的样式时，您需要指定一个自定义container这样，Popover的HTML就会出现在该元素中。

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

静态爆出器

有四个选项可用：上、右、底和左对齐。

打开getbootstrap.com上的示例

现场演示

打开getbootstrap.com上的示例

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

四个方向

打开getbootstrap.com上的示例

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

打开getbootstrap.com上的示例

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

使用

通过JavaScript启用弹出：

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

备选方案

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名追加到data-，如data-animation=""...

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

单个弹出式的数据属性

如上文所述，可以通过使用数据属性来指定单个弹出选项。

方法

异步方法和转换

所有API方法都是异步然后开始过渡.他们会在过渡开始后立即返回给呼叫者，但是在它结束之前此外，方法调用转换组件将被忽略。...

有关更多信息，请参阅我们的JavaScript文档。

`$().popover(options)`

初始化元素集合的弹出。

`.popover('show')`

显示元素的弹出。返回给调用方，然后才能实际显示该弹出。%28i.e.。在shown.bs.popover事件发生%29。这被认为是“手动”触发弹出。标题和内容都为零长度的弹出式永远不会显示。

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

`.popover('hide')`

隐藏元素的弹出。返回给调用方，然后才会隐藏该弹出。%28i.e.。在hidden.bs.popover事件发生%29。这被认为是“手动”触发弹出。

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

`.popover('toggle')`

切换元素的弹出。返回给调用方，然后才能实际显示或隐藏该弹出。%28i.e.。在shown.bs.popover或hidden.bs.popover事件发生%29。这被认为是“手动”触发弹出。

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

`.popover('dispose')`

隐藏并破坏元素的弹出。使用委托%28创建的弹出程序，使用大selector期权%29不能在子代触发器元素上单独销毁。

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

`.popover('enable')`

提供元素的弹出显示能力。默认情况下会启用弹出。

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

`.popover('disable')`

移除显示元素的弹出功能。只有在重新启用时，才能显示弹出器。

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

`.popover('toggleEnabled')`

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

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

`.popover('update')`

更新元素的弹出位置。

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

事件

Event Type	Description
show.bs.popover	This event fires immediately when the show instance method is called.
shown.bs.popover	This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.popover	This event is fired immediately when the hide instance method has been called.
hidden.bs.popover	This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.popover	This event is fired after the show.bs.popover event when the popover template has been added to the DOM.

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

 © 2011–2017 Twitter, Inc.

根据麻省理工学院的许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。

https：//getbootstrap.com/docs/4.0/Components/popover/

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18

概述

示例：在任何地方启用弹出式

示例：使用container期权

静态爆出器

现场演示

四个方向

下一次点击解散

下一次单击“解散”所需的特定标记

使用

备选方案

单个弹出式的数据属性

方法

异步方法和转换

$().popover(options)

.popover('show')

.popover('hide')

.popover('toggle')

.popover('dispose')

.popover('enable')

.popover('disable')

.popover('toggleEnabled')

.popover('update')

事件

示例：使用`container`期权

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('dispose')`

`.popover('enable')`

`.popover('disable')`

`.popover('toggleEnabled')`

`.popover('update')`