F2E合作社｜tooltips工具提示框｜Bootstrap 5網頁框架開發入門

前言

彈跳提示框有分兩種：

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

今天要講的是 tooltip ，它跟含羞草一樣，只要略有風吹草動，就算只是吹個氣（ hover ）就會迅速的觸發，想知道它是怎麼作用的嗎？那就繼續看下去吧。

（ 圖片來源 ）

官方網站的 Tooltips 頁面

在開始使用工具提示框之前，需要了解的事情

• 工具提示框需依靠第三方函式庫 Popper 進行定位。必須在 bootstrap.js 之前引入 popper.min.js 或是使用已經包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 讓彈出提示框運作。
• 出於效能上的考量，工具提示框是選擇性加入的，因此必須自行初始化。
• 標題長度為零的工具提示將不會被顯示。
• 指定 container: 'body' 以避免在更複雜的元件（ 像是 input 群組、按鈕群組等 ）中出現渲染問題。
• 隱藏元素上的工具提示將不會被觸發。
• .disabled 或 disabled 元素的工具提示必須在外層元素上被觸發。
• 被跨越多行的超連結觸發時，工具提示框將居中。在你的 <a> 連結上使用 white-space: nowrap; 來避免這種行為。
• 必須先隱藏工具提示框，然後才能從 DOM 中刪除相應的元素。

啟用工具提示框

其中一種在頁面上初始化所有工具提示的方法是透過它們的 data-bs-toggle 屬性，記得要放在 bootstrap.bundle.min.js 後面。

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})

基本工具提示框

在 title 裡輸入標題，在 data-bs-placement 裡填上提示框顯示方向。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
    Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
    Tooltip on left
</button>

加入自定義 HTML

可以在 title 裡加入 HTML 碼。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
    Tooltip with HTML
</button>

禁用的元素

具有 disabled 的元素是不能產生互動的，這意味用戶不能使用 focus , hover 或點擊，觸發（ 彈出 ）工具提示。解決方法是從 <div> 或 <span> 等包裝元素觸發工具提示，且設定 tabindex="0" 使其可以被鍵盤 focus ，並在禁用的元素上設定 pointer-events 。

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
    <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

參考資料

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