Bootstrap5 Popovers 基本使用及客製

Bootstrap 版本 5.3.3

前言

先前在實作 Bootstrap5 中 Popovers 的時候，在內容處除了文字之外，還需要加入輸入框、按鈕等 (如下圖)，以下來分享 Popovers 基本使用以及如何客製化內容結構。

基本使用

這邊需要注意兩件事情：

記得要載入 Bootstrap JS
必須手動初始化

首先我們先複製官方文件提供的範例，確保可以正常使用。

這邊來說明一下範例中的屬性 :

<button
  type="button"
  class="btn btn-lg btn-danger"
  data-bs-toggle="popover"
  data-bs-title="Popover title"
  data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
  Click to toggle popover
</button>

data-bs-toggle : 使 popover 開啟或關閉
data-bs-title : 以官方範例來說就是灰底區塊的文字
data-bs-content : 白底區塊的內容文字

既然要更動 content 的內容，那就直接在 data-bs-content 修改成 HTML 結構就好了吧？

但是實際改成 data-bs-content="我是文字" 後會發現，點開 popover 顯示的會是包含 HTML 標籤的 我是文字 XD

如何客製化內容結構

那要如何解決上述的問題呢？

在 HTML 標籤加入 data-bs-html="true" 可以使 data-bs-content 的內容以 HTML 格式渲染，但是當結構較為複雜時，這樣做似乎不是一個好辦法。

於是改成如下的寫法 :

<!-- index.html -->
<div class="cus-container">
  <!-- 按鈕 -->
  <a href="##" class="cus-popover pt-3" data-bs-toggle="popover">
    <span class="material-icons text-warning">
      radio_button_checked
    </span>
  </a>
  <!-- 內容 -->
  <div class="d-none">
    <div id="cus-content">
      <p class="mb-1">雷射雕刻</p>
      <div class="border d-flex align-items-center px-2 py-1">
        <input class="border-0" type="text" placeholder="hello world !" />
        <a href="##">
          <span class="material-icons align-bottom" style="color: #ff985e">
            send
          </span>
        </a>
      </div>
    </div>
  </div>
</div>

// index.js
const cusPopover = document.querySelector(".cus-popover");
const cusPopoverItem = new bootstrap.Popover(cusPopover, {
  container: ".cus-container", // 指定要在哪個位置渲染
  html: true, // 是否為 HTML 格式
  content: document.querySelector("#cus-content"), // 內容
  placement: "top"　// 要顯示的位置
});

(原本官方範例是用 querySelectorAll 來一次選取所有 popover，這邊因為內容都是獨立的，所以只選取單一元素)
(為了方便說明，這邊把 title 屬性拿掉，有需要再加上去即可)

在初始化的時候可以設定許多選項，我們將這些選項移至初始化時來做設定，這邊針對其中幾個作說明 :

container : 可以指定要在哪個位置渲染，當如果有需要吃到特定父層的樣式時，就可以在這邊設定使 popover 在該父層內部做渲染。
html : 設定為 true (預設是 false) 的話即可接受 HTML 格式，HTML 標籤就不會外露在畫面上。
content : 當 html 設定為 true ，可以直接在這邊輸入 HTML 結構，比如 content: '123'

這邊把 HTML 結構放在 HTML 檔案中並用 .d-none 包住，避免直接顯示在畫面上。接著在 .d-none 以及 HTML 結構中插入一個 div 並給予 id。最後在 content 我們就可以選取該 id 元素，當點開 popover 時，就可以看到整個結構都出現在畫面上了～

如此一來，就可以讓 HTML 結構的內容就歸在 HTML 檔案中，不會讓整陀複雜的結構出現在 js 檔案中了。

其他好用的選項

這邊也分享幾個自己覺得挺好用的設定，所有選項見官方文件

預設的 popover 箭頭都會出現在上下左右邊的正中間，我們可以透過 offset 選項來調整位置。

const cusPopoverItem = new bootstrap.Popover(cusPopover, {
  ...
  offset: [80, 20], // offset: '80, 20' 這樣寫也可以
});

預設需要點擊按鈕才可以關閉 popover，我們可以透過 trigger 選項來調整。

const cusPopoverItem = new bootstrap.Popover(cusPopover, {
  ...
  trigger: 'focus'
});

完整程式碼

參考資料

bootstrap5 popover - codepen
Popovers - Boostrap v5.3

Uli's blog