前言
彈跳提示框有分兩種：
- 含羞草 tooltip
- 捕蠅草 popover
今天要講的是 popover ，它跟捕蠅草一樣，只要碰觸到就會迅速的觸發，想知道它是怎麼作用的嗎？那就繼續看下去吧。
（ 圖片來源 ）
官方網站的 Popovers 頁面
在開始使用彈跳提示框之前，需要了解的事情
- 彈出提示框需依靠第三方函式庫 Popper 進行定位。必須在 bootstrap.js 之前引入
popper.min.js或是使用已經包含 Popper 的bootstrap.bundle.min.js / bootstrap.bundle.js讓彈出提示框運作。 - 彈出提示框需要 工具提示 作為依賴項目。
- 出於效能上的考量，彈出提示框是選擇性加入的，因此必須自行初始化。
title和content值為空時，將永遠不會顯示彈出提示框。- 強調
container: 'body'以避免在更複雜的元件 ( 例如 Input 群組、 button 群組等等 )中出現渲染問題。 - 在隱藏的元素中，觸發彈出提示框是不會作用的。
.disabled或disabled元素的彈出提示框必須在外層元素上觸發。- 當在跨多行的錨點中觸發時，彈出提示框會定位於整體寬度的中間。在您的
<a>元素上使用.text-nowrap來避免這樣的行為。 - 必須先隱藏彈出提示框，然後才能從 DOM 中刪除相應的元素。
啟用彈出提示框
在頁面上初始化所有彈出提示框的一種方法是透過 data-bs-toggle 屬性，記得要放在 bootstrap.bundle.min.js 後面。
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
使用 container 選項
當在父元素上有一些干擾彈出提示框的樣式時，需要指定一個自訂的 container ，以便讓彈出提示框的 HTML 顯示在該元素中。
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
基本彈跳提示框
在 title 裡放上標題，在 data-bs-content 裡輸入提示框的內容。
<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>
四個方向
共有四個選項： top , right , bottom , 和 left 對齊，在 Bootstrap 的 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>
下次點擊時移除
使用 focus 觸發，當用戶點擊切換元素以外的其他元素時，會移除這個彈出提示框。
下次點擊移除必須使用特定標籤
為了跨瀏覽器與跨平台運用，您必須使用
<a>標籤, 而不是<button>標籤，且必須包含 tabindex 屬性.
HTML
<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>
JavaScript
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
禁用元素
具有 disabled 屬性的元素是不能互動的，也就是說使用者無法 hover 或是點擊它們來觸發彈出提示框（ 或是工具提示框 ）。如果想要啟用，請從外層的 <div> 或 <span> 觸發彈出提示框，最好使用 tabindex ='0' 使鍵盤聚焦。
對於禁用的彈出提示框觸發，您可能傾向使用 data-bs-trigger="hover focus" 來直接為用戶提供視覺回饋，因為用戶預期不會去點擊禁用的元素。
<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>
