Bootstrap 5 Popover
Popovers
Popover 元件類似於工具提示；它是一個在使用者點選元素時出現的彈出框。不同之處在於，Popover可以包含更多內容。
如何建立 Popover
要建立 popover，請在元素上新增 data-bs-toggle="popover" 屬性。
使用 title 屬性指定 popover 的標題文字，使用 data-bs-content 屬性指定 popover 的正文中應顯示的文字。
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">Toggle popover</button>
注意： Popover 必須透過 JavaScript 初始化才能工作。
以下程式碼將啟用文件中的所有 Popover
示例
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
自己動手試一試 »
定位 Popover
預設情況下，Popover 將顯示在元素的右側。
使用 data-bs-placement 屬性設定 popover 在元素頂部、底部、左側或右側的位置。
示例
<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>
自己動手試一試 »
注意： 如果放置屬性沒有足夠的空間，它們可能無法按預期工作。例如：如果您在頁面頂部使用 top 放置（那裡沒有空間），它將改為在元素下方或右側（無論哪裡有空間）顯示 popover。
關閉 Popover
預設情況下，當您再次單擊元素時，popover 將關閉。但是，您可以使用 data-bs-trigger="focus" 屬性，該屬性將在單擊元素外部時關閉 popover。
示例
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
自己動手試一試 »
可懸停的 Popover
提示： 如果您希望在滑鼠指標移到元素上時顯示 popover，請使用 data-bs-trigger 屬性，其值為 "hover"
示例
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
自己動手試一試 »
