F2E合作社|popovers彈跳提示框|Bootstrap 5網頁框架開發入門


Posted by itiswonderfall on 2021-11-28

前言

彈跳提示框有分兩種:

  1. 含羞草 tooltip
  2. 捕蠅草 popover

今天要講的是 popover ,它跟捕蠅草一樣,只要碰觸到就會迅速的觸發,想知道它是怎麼作用的嗎?那就繼續看下去吧。

圖片來源

 


 

官方網站的 Popovers 頁面

 

在開始使用彈跳提示框之前,需要了解的事情

  • 彈出提示框需依靠第三方函式庫 Popper 進行定位。必須在 bootstrap.js 之前引入 popper.min.js 或是使用已經包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 讓彈出提示框運作。
  • 彈出提示框需要 工具提示 作為依賴項目。
  • 出於效能上的考量,彈出提示框是選擇性加入的,因此必須自行初始化
  • titlecontent 值為空時,將永遠不會顯示彈出提示框。
  • 強調 container: 'body' 以避免在更複雜的元件 ( 例如 Input 群組、 button 群組等等 )中出現渲染問題。
  • 在隱藏的元素中,觸發彈出提示框是不會作用的。
  • .disableddisabled 元素的彈出提示框必須在外層元素上觸發。
  • 當在跨多行的錨點中觸發時,彈出提示框會定位於整體寬度的中間。在您的 <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>

 


 

參考資料

  1. Popovers · Bootstrap v5.0
  2. 彈出提示框 (Popovers) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
  3. Tooltip與Popover提示訊息-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #popover







Related Posts

form 表單驗證(即時)

form 表單驗證(即時)

Day03_Origami學習筆記

Day03_Origami學習筆記

Git 版本控制(上)

Git 版本控制(上)


Comments