在 Bootstrap 中，彈出框是一種常見的交互式組件，風格類似iOS，可加在網(wǎng)頁上的任何元素上，用于在用戶點擊按鈕或鏈接時顯示一段額外的信息、確認消息或者用戶輸入表單。本教程將向大家展示Bootstrap彈出提示框相關(guān)示例。

一、popover插件

使用popover插件時需要注意的事項：

• Popovers依靠第三方庫Popper進行定位。必須在bootstrap.js之前包含popper.min.js，或者使用bootstrap.bundle.min.js/bootstrap.bundle.js，其中包含popper，這樣popover才能工作！
• Popovers需要工具提示插件作為依賴項；
• 由于性能原因，popover是選擇加入的，所以必須自己初始化它們；
• 長度為零的標題和內(nèi)容值永遠不會顯示popover；
• 指定container:’body’以避免在更復雜的組件（如輸入組、按鈕組等）中呈現(xiàn)問題；
• 觸發(fā)隱藏元素上的彈出窗口將不起作用；
• 必須在包裝器元素上觸發(fā).disabled或disabled元素的彈出窗口；
• 當從環(huán)繞多行的錨點觸發(fā)時，彈出窗口將在錨點的總寬度之間居中。在a上使用.text-nowrap可避免此行為；
• 必須先隱藏popover，然后才能從DOM中刪除相應(yīng)的元素；
• 由陰影DOM中的元素，可以觸發(fā)彈出窗口。

注意：

• 默認情況下，此組件使用內(nèi)置的內(nèi)容清理器，該清理器將刪除任何不明確允許的HTML元素；
• 此組件的動畫效果取決于“首選簡化運動媒體”查詢。

二、啟用彈出窗口

初始化頁面上所有popover的一種方法是通過其data-bs-toggle屬性選擇它們：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})

三、使用容器選項

當父元素上的某些樣式干擾popover時，需要指定一個自定義容器，以便popover的HTML顯示在該元素中。

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})

四、例子

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

1、四個方向

我們的選擇是可用的：頂部，右側(cè)，底部，左對齊。在RTL中使用引導時，方向是鏡像的。

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>

2、單擊時關(guān)閉

在用戶下一次單擊不同于toggle元素的元素時，使用focus觸發(fā)器取消彈出窗口。

下一次單擊時解除所需的特定標記：要實現(xiàn)正確的跨瀏覽器和跨平臺行為，必須使用a標記，而不是button標記，并且還必須包含tabindex屬性。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})

3、禁用的元素

具有disabled屬性的元素不是交互式的，所以用戶不能懸?；騿螕羲鼈儊碛|發(fā)popover（或工具提示）。作為一種解決方法，需要從包裝器div或span觸發(fā)popover，最好使用tabindex=“0”使鍵盤可聚焦。

對于禁用的popover觸發(fā)器，也可能更喜歡data-bs-trigger=”hover focus”，這樣popover會顯示為對用戶的即時視覺反饋，因為用戶可能不希望單擊禁用的元素。

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

五、用法

通過JavaScript啟用彈出窗口：

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

1、選項

選項可以通過數(shù)據(jù)屬性或JavaScript傳遞。對于數(shù)據(jù)屬性，將選項名稱附加到data-bs-，如data-bs-animation=“”中所示。在傳遞數(shù)據(jù)屬性時，請確保將選項名稱的case類型從camelCase更改為kebab-case。例如：不要使用數(shù)據(jù)data-bs-customClass=”beautifier”，而是使用數(shù)據(jù)data-bs-custom-class=”beautifier”。

注意：基于安全性的原因，data屬性不提供sanitize，sanitizeFn和allowList選項。

2、函數(shù)與popperConfig一起使用

var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})

六、方法

1、顯示

顯示元素的popover。在實際顯示popover之前（即在show.bs.popover事件發(fā)生之前）返回調(diào)用方。這被認為是popover的“手動”觸發(fā)。標題和內(nèi)容均為零長度的彈出窗口永遠不會顯示。

myPopover.show()

2、隱藏

隱藏元素的彈出提示框。在彈出提示框?qū)嶋H被隱藏之前返回給調(diào)用者（也就是在hidden.bs.popover事件發(fā)生之前。）彈出提示框會被認為是“manual”觸發(fā)。

myPopover.hide()

3、切換

切換元素的彈出提示框。在彈出提示框?qū)嶋H被顯示或隱藏之前返回給調(diào)用者（也就是在shown.bs.popover或hidden.bs.popover事件發(fā)生之前。）彈出提示框會被認為是“manual”觸發(fā)。

myPopover.toggle()

4、銷毀

隱藏和銷毀一個元素的彈出提示框（將移除在DOM元素上儲存的數(shù)據(jù)。）被委派的彈出提示框（使用the selector option創(chuàng)建）不能在后代觸發(fā)元素上單獨銷毀。

myPopover.dispose()

5、可用

使元素的彈出提示框能夠顯示。彈出提示框預設(shè)啟用顯示。

myPopover.enable()

6、禁用

取消顯示元素的popover的功能。只有重新啟用時才能顯示popover。

myPopover.disable()

7、切換可用

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

myPopover.toggleEnabled()

8、更新

更新彈出提示框的位置。

myPopover.update()

9、獲取實例

允許取得DOM元素上彈出提示框?qū)嶓w的靜態(tài)方法。

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

七、事件

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})