Bootstrap 5 彈出框

彈出框

彈出框（Popover）組件類似于工具提示；它是一種彈出框，當用戶點擊元素時出現。不同之處在于彈出框可以包含更多內容。

如何創建彈出框

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

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

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="彈出框標題" data-bs-content="彈出框內的一些內容">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>

親自試一試

定位彈出框

默認情況下，彈出框會出現在元素的右側。

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

實例

<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 屬性將不會按您的預期工作。例如：如果您在頁面頂部（無預留空間）使用 top placement 屬性，它將改為在元素下方或右側（任何有空間的地方）顯示彈出框。

關閉彈出框

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

實例

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

親自試一試

懸停彈出框

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

實例

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

親自試一試