?
This document uses PHP Chinese website manual Release
向站點(diǎn)上的任何元素添加Bootstrap彈出的文檔和示例，例如在IOS中找到的文件和示例。
概述
使用popover插件時(shí)要知道的事情：
彈出式程序依賴于第三黨的圖書館Popper.js用于定位。你必須包括popper.min.js在引導(dǎo).js或使用
bootstrap.bundle.min.js/bootstrap.bundle.js其中包含Popper.js，以便彈出程序能夠工作%21。
爆米花需要工具提示插件作為一種依賴。
如果從源頭構(gòu)建我們的JS，要求
util.js...
彈出是出于性能原因而選擇的，所以你必須自己初始化...
零長(zhǎng)
title和content值將永遠(yuǎn)不會(huì)顯示出一個(gè)彈出。
指定
container: 'body'為了避免在更復(fù)雜的組件(如我們的輸入組、按鈕組等)中呈現(xiàn)問(wèn)題，%29。
觸發(fā)隱藏元素的彈出將無(wú)法工作。
爆米花
.disabled或disabled元素必須在包裝器元素上觸發(fā)。
當(dāng)從跨越多行的錨觸發(fā)時(shí)，彈出式將集中在錨的總體寬度之間。使用
white-space: nowrap;你的<a>為了避免這種行為。
在從DOM中刪除相應(yīng)的元素之前，必須隱藏彈出項(xiàng)。
繼續(xù)閱讀，看看如何使用一些例子。
示例：在任何地方啟用彈出式
初始化頁(yè)面上所有彈出框的一種方法是根據(jù)它們的data-toggle屬性：
$(function () { $('[data-toggle="popover"]').popover()})示例：使用container期權(quán)
當(dāng)父元素上有一些與彈出程序有干擾的樣式時(shí)，您需要指定一個(gè)自定義container這樣，Popover的HTML就會(huì)出現(xiàn)在該元素中。
$(function () { $('.example-popover').popover({
container: 'body' })})靜態(tài)爆出器
有四個(gè)選項(xiàng)可用：上、右、底和左對(duì)齊。
現(xiàn)場(chǎng)演示
<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>
四個(gè)方向
<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>
下一次點(diǎn)擊解散
使用focus觸發(fā)器，以取消用戶下一次單擊與切換元素不同的元素的彈出。
下一次單擊“解散”所需的特定標(biāo)記
對(duì)于正確的跨瀏覽器和跨平臺(tái)行為，必須使用<a>標(biāo)簽，不大<button>標(biāo)記，并且您還必須包括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'})使用
通過(guò)JavaScript啟用彈出：
$('#example').popover(options)備選方案
選項(xiàng)可以通過(guò)數(shù)據(jù)屬性或JavaScript傳遞。對(duì)于數(shù)據(jù)屬性，將選項(xiàng)名追加到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. |
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 |
單個(gè)彈出式的數(shù)據(jù)屬性
如上文所述，可以通過(guò)使用數(shù)據(jù)屬性來(lái)指定單個(gè)彈出選項(xiàng)。
方法
異步方法和轉(zhuǎn)換
所有API方法都是異步然后開(kāi)始過(guò)渡.他們會(huì)在過(guò)渡開(kāi)始后立即返回給呼叫者，但是在它結(jié)束之前此外，方法調(diào)用轉(zhuǎn)換組件將被忽略。...
有關(guān)更多信息，請(qǐng)參閱我們的JavaScript文檔。
$().popover(options)
初始化元素集合的彈出。
.popover('show')
顯示元素的彈出。返回給調(diào)用方，然后才能實(shí)際顯示該彈出。%28i.e.。在shown.bs.popover事件發(fā)生%29。這被認(rèn)為是“手動(dòng)”觸發(fā)彈出。標(biāo)題和內(nèi)容都為零長(zhǎng)度的彈出式永遠(yuǎn)不會(huì)顯示。
$('#element').popover('show').popover('hide')
隱藏元素的彈出。返回給調(diào)用方，然后才會(huì)隱藏該彈出。%28i.e.。在hidden.bs.popover事件發(fā)生%29。這被認(rèn)為是“手動(dòng)”觸發(fā)彈出。
$('#element').popover('hide').popover('toggle')
切換元素的彈出。返回給調(diào)用方，然后才能實(shí)際顯示或隱藏該彈出。%28i.e.。在shown.bs.popover或hidden.bs.popover事件發(fā)生%29。這被認(rèn)為是“手動(dòng)”觸發(fā)彈出。
$('#element').popover('toggle').popover('dispose')
隱藏并破壞元素的彈出。使用委托%28創(chuàng)建的彈出程序，使用大selector期權(quán)%29不能在子代觸發(fā)器元素上單獨(dú)銷毀。
$('#element').popover('dispose').popover('enable')
提供元素的彈出顯示能力。默認(rèn)情況下會(huì)啟用彈出。
$('#element').popover('enable').popover('disable')
移除顯示元素的彈出功能。只有在重新啟用時(shí)，才能顯示彈出器。
$('#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自帶作者
根據(jù)麻省理工學(xué)院的許可授權(quán)的代碼。
根據(jù)CreativeCommonsAttributionLicense v3.0授權(quán)的文檔。