Bootstrap JS 工具提示
JS 工具提示 (tooltip.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" | 指定工具提示的觸發方式。可能的值
|
試一試 |
| viewport | 字串，或物件 | {selector: "body", padding: 0} | 將工具提示保持在此元素的邊界內。 示例：viewport: '#viewport' 或 {selector: '#viewport', padding: 0} |
工具提示方法
下表列出了所有可用的工具提示方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .tooltip(options) | 使用選項啟用工具提示。有關有效值，請參閱上面的選項 | 試一試 |
| .tooltip("show") | 顯示工具提示 | 試一試 |
| .tooltip("hide") | 隱藏工具提示 | 試一試 |
| .tooltip("toggle") | 切換工具提示的顯示/隱藏狀態 | 試一試 |
| .tooltip("destroy") | 隱藏並銷燬工具提示 | 試一試 |
工具提示事件
下表列出了所有可用的工具提示事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| show.bs.tooltip | 在工具提示即將顯示時觸發 | 試一試 |
| shown.bs.tooltip | 在工具提示完全顯示後觸發（CSS 過渡完成後） | 試一試 |
| hide.bs.tooltip | 在工具提示即將隱藏時觸發 | 試一試 |
| hidden.bs.tooltip | 在工具提示完全隱藏後觸發（CSS 過渡完成後） | 試一試 |
更多示例
自定義工具提示設計
使用 CSS 自定義工具提示的外觀
示例
/* 工具提示 */
.test + .tooltip > .tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* 頂部工具提示 */
.test + .tooltip.top > .tooltip-arrow {
border-top: 5px solid green;
}
/* 底部工具提示 */
.test + .tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* 左側工具提示 */
.test + .tooltip.left > .tooltip-arrow {
border-left: 5px solid red;
}
/* 右側工具提示 */
.test + .tooltip.right > .tooltip-arrow {
border-right: 5px solid black;
}
自己動手試一試 »
