JS工具提示(tooltip.js)
該工具提示插件是小的彈出框，當用戶在一個元素上移動鼠標指針出現。
對於有關工具提示教程，請閱讀我們的Bootstrap Tooltip教程 。
通過data-*屬性
該data-toggle="tooltip"激活提示。
該title屬性指定應提示裡面顯示的文本。
通過JavaScript
提示不僅是CSS-插件，因此必須用jQuery初始化：選擇指定的元素，並調用tooltip()方法。
例
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
試一試» 提示選項
選項可以通過數據屬性或JavaScript進行傳遞。 對於數據屬性，選項名稱追加到data-在data-placement=""
| 名稱 | 類型 | 默認 | 描述 | 嘗試一下 |
|---|---|---|---|---|
| animation | boolean | true | 指定是否添加CSS淡入淡出過渡效果顯示和隱藏工具提示時，
| 嘗試一下 |
| 容器 | 字符串或布爾值false | 假 | 追加工具提示特定元素。 例如：容器： 'body' | 嘗試一下 |
| delay | number, or object | 0 | 指定毫秒它會顯示和隱藏工具提示的數量。 來指定用於顯示的延遲和另一個用於隱藏，使用對象結構： delay: {show: 500, hide: 100} -這將需要500毫秒，以顯示tooltip ，但只有100毫秒來隱藏它 | 嘗試一下 |
| html | boolean | false | 指定是否接受HTML標籤的提示：
當設置為false（默認）， jQuery's text()將被使用的方法。 如果你擔心XSS攻擊使用此 | 嘗試一下 |
| placement | string | "top" | 指定提示的位置。 可能的值：
| 嘗試一下 |
| selector | string, or the boolean false | false | 添加工具提示到指定的選擇 | 嘗試一下 |
| template | string | 基本HTML創建工具提示時使用。 工具提示的標題將被插入到具有所述類元素.tooltip-inner並與類元素.tooltip-arrow將成為工具提示的箭頭。 最外層的包裝元素應該有.tooltip類。 | ||
| title | string | "" | 指定應工具提示內顯示的文本 | 嘗試一下 |
| trigger | string | "hover focus" | 指定提示是如何觸發。 可能的值：
| 嘗試一下 |
| viewport | string, or object | {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自定義工具提示的外觀：
例
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
} 試一試»