Bootstrap JS 工具提示
JS 工具提示
當用戶將滑鼠指標移到元素上時，會彈出一個小的彈出框，這就是工具提示。
要了解工具提示的教程，請閱讀我們的 Bootstrap 工具提示教程。
透過 data-* 屬性
data-toggle="tooltip" 啟用工具提示。
title 屬性指定了應在工具提示內顯示的文字。
透過 JavaScript
工具提示不是純 CSS 外掛，因此必須使用 jQuery 進行初始化：選擇指定元素並呼叫 tooltip() 方法。
示例
// 選擇文件中所有具有 data-toggle="tooltips" 的元素
$('[data-toggle="tooltip"]').tooltip();
// 選擇指定元素
$('#myTooltip').tooltip();
自己動手試一試 »
工具提示選項
選項可以透過資料屬性或 JavaScript 傳遞。對於資料屬性，將選項名稱附加到 data-，例如 data-placement=""。
| 名稱 | 型別 | 預設值 | 描述 | 試一試 |
|---|---|---|---|---|
| animation | boolean | true |
指定是否在顯示和隱藏工具提示時新增 CSS 淡入淡出過渡效果
|
試一試 |
| container | 字串，或布林值 false | false | 將工具提示附加到特定元素。 示例：container: 'body' |
試一試 |
| delay | 數字，或物件 | 0 | 指定顯示和隱藏工具提示的毫秒數。 要為顯示和隱藏設定不同的延遲，請使用物件結構 delay: {show: 500, hide: 100} - 這將花費 500 毫秒顯示工具提示，但只花費 100 毫秒隱藏它 |
試一試 |
| html | boolean | false | 指定是否接受工具提示中的 HTML 標籤
當設定為 false（預設）時，將使用 jQuery 的 text() 方法。如果您擔心 XSS 攻擊，請使用此選項 |
試一試 |
| placement | string | "top" | 指定工具提示的位置。可能的值
|
試一試 |
| selector | 字串，或布林值 false | false | 將工具提示新增到指定的選擇器 | 試一試 |
| template | string | 建立工具提示時使用的基本 HTML。 工具提示的標題將插入到具有 .tooltip-inner 類的元素中，而具有 .tooltip-arrow 類的元素將成為工具提示的箭頭。 最外層包裝元素應具有 .tooltip 類。 |
||
| title | string | "" | 指定應在工具提示內顯示的文字 | 試一試 |
| trigger | string | "hover focus" | 指定如何觸發工具提示。可能的值
|
試一試 |
| offset | 數字或字串 | 0 | 工具提示相對於其目標元素的偏移量 | |
| fallbackPlacement | 字串或陣列 | "flip" | 指定 Popper 將使用哪個位置作為後備 | |
| boundary | 字串或元素 | "scrollParent" | 工具提示的溢位約束邊界。接受值 "viewport"、"window" 或 "scrollParent"，或者一個 HTML 元素 |
工具提示方法
下表列出了所有可用的工具提示方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .tooltip(options) | 使用選項啟用工具提示。有關有效值，請參見上面的選項 | 試一試 |
| .tooltip("show") | 顯示工具提示 | 試一試 |
| .tooltip("hide") | 隱藏工具提示 | 試一試 |
| .tooltip("toggle") | 切換工具提示 | 試一試 |
| .tooltip("dispose") | 隱藏並銷燬工具提示 | 試一試 |
工具提示事件
下表列出了所有可用的工具提示事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| show.bs.tooltip | 工具提示即將顯示時觸發 | 試一試 |
| shown.bs.tooltip | 工具提示完全顯示後觸發（在 CSS 過渡完成後） | 試一試 |
| hide.bs.tooltip | 工具提示即將隱藏時觸發 | 試一試 |
| hidden.bs.tooltip | 工具提示完全隱藏後觸發（在 CSS 過渡完成後） | 試一試 |
