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


Posted by itiswonderfall on 2021-11-28

前言

彈跳提示框有分兩種:

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

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

圖片來源

 


 

官方網站的 Tooltips 頁面

 

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

  • 工具提示框需依靠第三方函式庫 Popper 進行定位。必須在 bootstrap.js 之前引入 popper.min.js 或是使用已經包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 讓彈出提示框運作。
  • 出於效能上的考量,工具提示框是選擇性加入的,因此必須自行初始化
  • 標題長度為零的工具提示將不會被顯示。
  • 指定 container: 'body' 以避免在更複雜的元件( 像是 input 群組、按鈕群組等 )中出現渲染問題。
  • 隱藏元素上的工具提示將不會被觸發。
  • .disableddisabled 元素的工具提示必須在外層元素上被觸發。
  • 被跨越多行的超連結觸發時,工具提示框將居中。在你的 <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網頁框架開發入門 | 網頁開發 | 網頁教學

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







Related Posts

Day 01 典型統計應用在社群媒體分析(Classical statistics applied to social data) part 1

Day 01 典型統計應用在社群媒體分析(Classical statistics applied to social data) part 1

Checked and Unchecked Exception in Java

Checked and Unchecked Exception in Java

HTML 標籤元素與屬性介紹

HTML 標籤元素與屬性介紹


Comments