彈出框

彈出框

彈出框（Popover）組件類似于工具提示；它是一種彈出框，當(dāng)用戶點(diǎn)擊元素時出現(xiàn)。不同之處在于彈出框可以包含更多內(nèi)容。

如何創(chuàng)建彈出框

如需創(chuàng)建彈出框，請將 data-bs-toggle="popover" 屬性添加到元素。

請使用 title 屬性規(guī)定彈出框的標(biāo)題文本，并使用 data-bs-content 屬性規(guī)定在彈出框正文中顯示的文本：

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="彈出框標(biāo)題" data-bs-content="彈出框內(nèi)的一些內(nèi)容">Toggle popover</button>

注意：彈出框必須用 JavaScript 初始化才能工作。

以下代碼將啟用文檔中的所有彈出框：

實例

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

定位彈出框

默認(rèn)情況下，彈出框會出現(xiàn)在元素的右側(cè)。

請使用 data-bs-placement 屬性設(shè)置彈出框在元素頂部、底部、左側(cè)或右側(cè)的位置：

實例

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>

注意：如果沒有足夠的空間，placement 屬性將不會按您的預(yù)期工作。例如：如果您在頁面頂部（無預(yù)留空間）使用 top placement 屬性，它將改為在元素下方或右側(cè)（任何有空間的地方）顯示彈出框。

關(guān)閉彈出框

默認(rèn)情況下，再次單擊元素時會關(guān)閉彈出窗口。但是，您可以使用 data-bs-trigger="focus" 屬性，設(shè)置該屬性可在元素外部單擊時關(guān)閉彈出窗口：

實例

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="單擊文檔中的任意位置可關(guān)閉此彈出窗口">點(diǎn)擊我</a>

懸停彈出框

提示：如果您希望在將鼠標(biāo)指針移動到元素上時顯示彈出框，請使用值為 "hover" 的 data-bs-trigger 屬性：

實例

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="彈出框文本">請在我上方懸停</a>