工具提示
文件和範例，說明如何使用 CSS 和 JavaScript 加入自訂 Bootstrap 工具提示，並使用 CSS3 進行動畫處理，以及使用資料屬性進行標題的本機儲存。
概觀
使用工具提示外掛程式時應注意的事項
- 工具提示仰賴第三方函式庫 Popper 進行定位。您必須在 bootstrap.js 之前加入 popper.min.js，或使用包含 Popper 的
bootstrap.bundle.min.js/bootstrap.bundle.js，才能讓工具提示正常運作！ - 如果您從原始碼建置我們的 JavaScript，它 需要
util.js。 - 工具提示基於效能考量而採用選用機制，因此您必須自行初始化。
- 標題長度為零的工具提示永遠不會顯示。
- 指定
container: 'body'以避免在較複雜的元件（例如我們的輸入群組、按鈕群組等）中產生顯示問題。 - 在隱藏的元素上觸發工具提示不會生效。
.disabled或disabled元素的工具提示必須觸發在包裝元素上。- 當從跨多行的超連結觸發時，工具提示會置中。在您的
<a>上使用white-space: nowrap;以避免此行為。 - 在對應的元素從 DOM 中移除之前，必須隱藏工具提示。
- 由於陰影 DOM 中的元素，可以觸發工具提示。
prefers-reduced-motion 媒體查詢。請參閱我們的無障礙文件中的 降低動作區段。
都了解了嗎？很好，讓我們看看它們如何透過一些範例運作。
範例：在所有地方啟用工具提示
初始化頁面上所有工具提示的一種方法是透過其 data-toggle 屬性來選取它們
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
範例
將滑鼠游標移到以下連結上以查看工具提示
佔位符文字用於展示一些 內嵌連結 和工具提示。這現在只是填充物，沒有殺傷力。放置於此處的內容只是為了模擬 真實文字 的存在。而這一切只是為了讓您了解在實際情況中使用工具提示時的外觀。因此，希望您現在已經了解 連結上的這些工具提示 在實務上如何運作，一旦您在 您自己的 網站或專案上使用它們。
將滑鼠游標移到以下按鈕上以查看四個工具提示方向：上、右、下和左。
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
並加上自訂 HTML
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
用法
工具提示外掛程式會依需求產生內容和標記，並預設將工具提示置於其觸發元素之後。
透過 JavaScript 觸發工具提示
$('#example').tooltip(options)
溢位 auto 和 scroll
當父容器具有 overflow: auto 或 overflow: scroll（例如我們的 .table-responsive）時，工具提示位置會嘗試自動變更，但仍會保留原始位置的定位。若要解決此問題，請將 boundary 選項設定為預設值 'scrollParent' 以外的任何值，例如 'window'
$('#example').tooltip({ boundary: 'window' })
標記
工具提示所需的標記只是一個 data 屬性和您希望有工具提示的 HTML 元素上的 title。工具提示的產生標記相當簡單，儘管它確實需要一個位置（預設情況下，外掛程式設定為 top）。
讓工具提示適用於鍵盤和輔助技術使用者
您應該只將工具提示新增至傳統上可使用鍵盤對焦且具互動性的 HTML 元素（例如連結或表單控制項）。儘管可以透過新增 tabindex="0" 屬性讓任意 HTML 元素（例如 <span>）可對焦，但這會為鍵盤使用者在非互動元素上新增潛在令人厭煩且混淆的定位點，而且目前大多數輔助技術在這種情況下不會宣告工具提示。此外，請勿僅依賴 hover 作為工具提示的觸發器，因為這將讓鍵盤使用者無法觸發您的工具提示。
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
已停用的元素
具有 disabled 屬性的元素並非互動性的，表示使用者無法對焦、懸停或按一下它們來觸發工具提示（或彈出視窗）。作為解決方法，您會希望從包裝器 <div> 或 <span> 觸發工具提示，理想情況下使用 tabindex="0" 讓其可使用鍵盤對焦，並覆寫已停用的元素上的 pointer-events。
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>選項
可透過資料屬性或 JavaScript 傳遞選項。對於資料屬性，請將選項名稱附加至 data-，例如 data-animation=""。
sanitize、sanitizeFn 和 whiteList 選項。
| 名稱 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| animation | 布林值 | true | 對工具提示套用 CSS 淡入淡出轉場 |
| container | 字串 | 元素 | false | false |
將工具提示附加至特定元素。範例： |
| delay | 數字 | 物件 | 0 |
延遲顯示和隱藏工具提示（毫秒） - 不適用於手動觸發類型 如果提供數字，則延遲會套用至隱藏/顯示 物件結構為： |
| html | 布林值 | false |
允許在工具提示中使用 HTML。 如果為 true，則工具提示的 如果您擔心 XSS 攻擊，請使用文字。 |
| 位置 | 字串 | 函式 | 'top' |
如何定位提示工具 - auto | top | bottom | left | right。 當使用函式來決定位置時，它會以提示工具 DOM 節點作為第一個參數，觸發元素 DOM 節點作為第二個參數來呼叫。 |
| 選擇器 | 字串 | false | false | 如果提供選擇器，提示工具物件將委派給指定的目標。實際上，這用於將提示工具也套用至動態新增的 DOM 元素（支援 jQuery.on）。請參閱 這 和 一個有用的範例。 |
| 範本 | 字串 | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
建立提示工具時要使用的基本 HTML。 提示工具的
最外層的包裝元素應具有 |
| 標題 | 字串 | 元素 | 函式 | '' |
如果沒有 如果給定函式，它會以其 |
| 觸發 | 字串 | 'hover focus' |
如何觸發提示工具 - click | hover | focus | manual。您可以傳遞多個觸發器；用空格分隔它們。
單獨的 |
| 偏移 | 數字 | 字串 | 函式 | 0 |
提示工具相對於其目標的偏移量。 當使用函式來決定偏移量時，它會以包含偏移量資料的物件作為其第一個參數來呼叫。函式必須傳回具有相同結構的物件。觸發元素 DOM 節點傳遞為第二個參數。 有關更多資訊，請參閱 Popper 的 offset 文件。 |
| fallbackPlacement | 字串 | 陣列 | 'flip' | 允許指定 Popper 在後備時將使用的位置。有關更多資訊，請參閱 Popper 的 行為文件。 |
| customClass | 字串 | 函式 | '' |
在顯示提示時，新增類別至提示。請注意，這些類別將會新增至範本中指定的任何類別。若要新增多個類別，請使用空白分隔它們： 您也可以傳遞一個函式，該函式應傳回包含額外類別名稱的單一字串。 |
| boundary | 字串 | 元素 | 'scrollParent' | 提示的溢位約束邊界。接受 'viewport'、'window'、'scrollParent' 的值，或 HTMLElement 參照（僅限 JavaScript）。有關更多資訊，請參閱 Popper 的 preventOverflow 文件。 |
| sanitize | 布林值 | true | 啟用或停用消毒。如果啟用，'template' 和 'title' 選項將會被消毒。請參閱 JavaScript 文件中的消毒區段。 |
| whiteList | 物件 | 預設值 | 包含允許屬性和標籤的物件 |
| sanitizeFn | null | 函式 | null | 您可以在這裡提供您自己的消毒函式。如果您偏好使用專門的程式庫來執行消毒，這會很有用。 |
| popperConfig | null | 物件 | null | 若要變更 Bootstrap 預設的 Popper 組態，請參閱 Popper 的組態。 |
個別提示的資料屬性
個別提示的選項也可以透過使用資料屬性來指定，如上所述。
方法
非同步方法和過渡
所有 API 方法都是非同步的，並會開始過渡。它們在過渡開始後立即傳回呼叫方，但在它結束之前。此外，正在過渡的組件上的方法呼叫將會被忽略。
$().tooltip(options)
將提示處理常式附加至元素集合。
.tooltip('show')
揭露元素的提示。在提示實際顯示之前傳回呼叫方（即在 shown.bs.tooltip 事件發生之前）。這被視為提示的「手動」觸發。標題長度為零的提示永遠不會顯示。
$('#element').tooltip('show')
.tooltip('hide')
隱藏元素的提示。在提示實際隱藏之前傳回呼叫方（即在 hidden.bs.tooltip 事件發生之前）。這被視為提示的「手動」觸發。
$('#element').tooltip('hide')
.tooltip('toggle')
切換元素的工具提示。在工具提示實際顯示或隱藏之前傳回呼叫者（即在 shown.bs.tooltip 或 hidden.bs.tooltip 事件發生之前）。這被視為工具提示的「手動」觸發。
$('#element').tooltip('toggle')
.tooltip('dispose')
隱藏並銷毀元素的工具提示。使用委派（使用 selector 選項 建立）的工具提示無法在後代觸發元素上個別銷毀。
$('#element').tooltip('dispose')
.tooltip('enable')
讓元素的工具提示具備顯示功能。工具提示預設啟用。
$('#element').tooltip('enable')
.tooltip('disable')
移除元素的工具提示顯示功能。只有在重新啟用時，工具提示才能顯示。
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
切換元素的工具提示顯示或隱藏功能。
$('#element').tooltip('toggleEnabled')
.tooltip('update')
更新元素工具提示的位置。
$('#element').tooltip('update')
事件
| 事件類型 | 說明 |
|---|---|
| show.bs.tooltip | 當呼叫 show 執行個體方法時，此事件會立即觸發。 |
| shown.bs.tooltip | 當工具提示對使用者可見時，此事件會觸發（會等待 CSS 轉場完成）。 |
| hide.bs.tooltip | 當呼叫 hide 執行個體方法時，此事件會立即觸發。 |
| hidden.bs.tooltip | 當工具提示從使用者眼前隱藏完成時，此事件會觸發（會等待 CSS 轉場完成）。 |
| inserted.bs.tooltip | 當工具提示範本新增至 DOM 時，此事件會在 show.bs.tooltip 事件後觸發。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})