弹出框 | 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'
})
})
静态爆出器
有四个选项可用：上、右、底和左对齐。
现场演示
<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属性。
<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.
©2011-2017自带作者
根据麻省理工学院的许可授权的代码。
根据CreativeCommonsAttributionLicense v3.0授权的文档。
