彈出提示框 (Popovers)

Bootstrap 彈出提示框的文件與範例,風格類似 iOS 上的,可加在網頁上的任何元素上。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

概觀

使用彈出提示框插件時應瞭解的事情如下:

  • 彈出提示框依靠第三方函式庫 Popper.js 進行定位。 在 Bootstrap 彈出提示框工作之前,您必須包含 popper.min.js,或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js,這已經包含 Popper.js 可以直接運作。
  • 彈出提示框需要 工具提示插件 作為依賴。
  • 如果你自行編譯 JS,記得 requires util.js
  • 彈出提示框因為校能原因所以是選擇加入,所以 您必須自己將他們初始化
  • 零長度 titlecontent 值將永遠不會顯示一個彈出提示框。
  • 指定 container: 'body' 以避免在更複雜的元件(如我們的輸入群組,按鈕群組等)中呈現問題。
  • 隱藏元素的彈出提示框是不會成功的。
  • .disableddisabled 元素彈出提示框的觸發必須在外層元素上。
  • 當從跨越多行的超連結觸發時,彈出提示框將被居中。在你的 <a> 上使用 white-space: nowrap; 來避免這種行為。
  • 必須先隱藏彈出提示框,然後才能從 DOM 中刪除相應的元素。

都明白了?太好了,讓我們透過一些例子看他們是如何運作的。

範例:在任何地方啟用彈出提示框

在頁面上初始化所有彈出提示框的一種方法是透過它們的 data-toggle 屬性來選擇它們:

$(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?">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 觸發以便用戶進行下一次點擊時移除這個彈出提示框。

«««< HEAD

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

v4.0.0-beta.2

下一步點擊所需的具體標記

為了正確的跨瀏覽器和跨平台,您必須使用 <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'
})

«««< HEAD

用法

透過 JavaScript 啟用彈出提示框。

Usage

v4.0.0-beta.2

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

選項

可以透過資料屬性或 JavaScript 傳遞選項。 對於資料屬性,將選項名稱附加到 data- 上,如 data-animation=""

名稱 類型 預設 描述
animation boolean true 將 CSS 漸變套用到彈出提示框
container string | element | false false

將彈出提示框加到特定元素。例如:container: 'body'。 該選項特別有用,因為它允許您將觸摸屏定位在觸發元素附近的文字內容 - 這將防止在畫面調整大小期間彈出的提示遠離觸發元素。

content string | element | function ''

如果 data-content 屬性不存在,則為預設內容值。

如果給出一個函數,它將被調用,其this 引用設置為彈出提示框附加到的元素。

delay number | object 0

顯示和隱藏彈出提示框的延遲(ms) - 不適用於手動觸發類型

如果提供了一個數字,則將延遲應用於隱藏/顯示

物件結構是:delay: { "show": 500, "hide": 100 }

html boolean false 將HTML插入到彈出提示框中。 如果是 false,那麼將使用 jQuery 的 text 方法將內容插入到 DOM 中。如果您擔心 XSS 攻擊,請使用文字。
placement string | function 'right'

如何定位彈出提示框 - auto | top | bottom | left | right。
指定 auto 時,將動態重新定位彈出提示框。

當函數用於確定位置時,將使用彈出提示框 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

title string | element | function ''

如果 title 屬性不存在,則為預設標題值。

如果給出一個函數,它將被調用,其 this 引用設置為動態提示框附加到的元素。

trigger string 'click' 如何觸發動態提示框 - click | hover | focus | manual。 您可以傳遞多個觸發器;將它們與空格分開。`manual` 不能與任何其他觸發器組合。
offset number | string 0 動態提示框相對於其目標的偏移。更多信息,請參閱 Popper.js 的 偏移文檔
fallbackPlacement string | array 'flip' 指定動態提示框將在調回時使用哪個位置。 有關更多信息,請參閱 Popper.js 的 行為文檔

各彈出提示框的資料屬性

如上所述,可以通過使用資料屬性來替代指定各個彈出提示框的選項。

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

$().popover(options)

元素集合的彈出提示框初始化。

.popover('show')

顯示一個元素的彈出提示框。 在彈出實際顯示之前返回給調用者(即,在 shown.bs.popover 事件發生之前)。 這被認為是彈出提示框是 “手動” 觸發。標題和內容均為零的彈出提示框從不顯示。

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

.popover('hide')

隱藏元素的彈出提示框。 在彈出提示框實際被隱藏之前返回給調用者(即在 hidden.bs.popover 事件發生之前)。這被認為是彈出提示框的 “手動” 觸發。

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

.popover('toggle')

切換元素的彈出提示框。 在popover實際顯示或隱藏之前返回給調用者(即,在 shown.bs.popoverhidden.bs.popover 事件發生之前)。 這被認為是彈出提示框的 “手動” 觸發。

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

.popover('dispose')

隱藏和銷毀一個元素的彈出提示框。使用委託(the selector option) 創建)的彈出提示框不能在後代觸發元素上被單獨銷毀。

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

.popover('enable')

給一個元素的彈出提示框顯示的功能。 彈出提示框是在預設情況下啟用的。

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

.popover('disable')

刪除要顯示元素的彈出提示框的功能。只有在重新啟用後,才能顯示彈出提示框。

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

.popover('toggleEnabled')

切換彈出提示框的顯示或隱藏元素功能。

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

.popover('update')

更新彈出提示框的位置。

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

事件

事件類型 描述
show.bs.popover 當調用 show 實例方法時,此事件會立即觸發。
shown.bs.popover 當彈出提示框顯示時,會觸發此事件(待 CSS 轉換完成)。
hide.bs.popover 當調用 hide 實例方法時,會立即觸發此事件。
hidden.bs.popover 當彈出提示框隱藏後,會觸發此事件(將等待CSS轉換完成)
inserted.bs.popover 當將提示範本加到 DOM 時,此事件在 show.bs.popover 事件之後觸發。
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})