## 工具提示 tooltip.js
Bootstrap?提示工具（Tooltip）插件工具可以通過(guò)鼠標(biāo)移動(dòng)到選定的特定的元素上時(shí)，顯示出相關(guān)的提示語(yǔ)。當(dāng)您想要描述一個(gè)鏈接的時(shí)候，提示工具（Tooltip）就顯得非常有用。提示工具（Tooltip）插件做了很多改進(jìn)，例如不需要依賴圖像，而是改用 CSS 實(shí)現(xiàn)動(dòng)畫(huà)效果，用 data 屬性存儲(chǔ)標(biāo)題信息。
靜態(tài)樣式：
**用法**
提示工具（Tooltip）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把提示工具（tooltip）放在它們的觸發(fā)元素后面。有以下兩種方式添加提示工具（tooltip）：
* **通過(guò) data 屬性**：如需添加一個(gè)提示工具（tooltip），只需向一個(gè)錨標(biāo)簽添加**data-toggle="tooltip"**即可。錨的 title 即為提示工具（tooltip）的文本。默認(rèn)情況下，插件把提示工具（tooltip）設(shè)置在頂部。
```html
<a href="#" data-toggle="tooltip" title="This is the tooltip">Tooltip Example</a>
<a href="#" data-toggle="tooltip" data-original-title="This is the tooltip">Tooltip Example</a>
```
* **通過(guò) JavaScript**：通過(guò) JavaScript 觸發(fā)提示工具（tooltip）：
```js
$('#identifier').tooltip(options)
```
> 由于性能的原因，不能通過(guò) data 屬性直接激活工具提示插件，需要通過(guò)Javascript代碼手動(dòng)初始化它。只有初始化之后，將鼠標(biāo)移動(dòng)到鏈接上，才會(huì)顯示相關(guān)的提示信息。否則，是不會(huì)顯示任何提示信息的。
~~~
$(function?()?{?$("[data-toggle='tooltip']").tooltip();?});
~~~
案例如下：
```html
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
```
> 1. 不要試圖顯示隱藏元素的工具提示。當(dāng)目標(biāo)元素為display:none；時(shí)調(diào)用$（…）.tooltip（'show'）將導(dǎo)致工具提示的位置不正確。
>2. 禁用元素的工具提示需要包裝元素。要向disabled或.disabled元素添加工具提示，請(qǐng)將該元素放在\<div\>內(nèi)，并將工具提示應(yīng)用于該\<div\>。
*****
**工具提示插件的選項(xiàng)**
Bootstrap為工具提示插件提供了 10 個(gè)選項(xiàng)，所有的選項(xiàng)都可以通過(guò) data 屬性或JavaScript進(jìn)行設(shè)置。
| 名稱 | 類型 | 默認(rèn)值 | 說(shuō)明 |
| --- | --- | --- | --- |
| animation | boolean | true | 為工具提示應(yīng)用CSS淡入淡出過(guò)渡效果 |
| container | string false | false | 將提示條附加到特定元素，如 container: 'body' |
| delay | number object | 0 | 延遲顯示和隱藏提示條的時(shí)間（毫秒）——手動(dòng)觸發(fā)提示條時(shí)無(wú)效如果只指定一個(gè)數(shù)值，則隱藏和顯示都使用該數(shù)值。對(duì)象的結(jié)構(gòu)為 delay: { show: 500, hide: 100 }|
| html | boolean | false | 提示條支持插入 HTML。如果取值為 false，則使用 jQuery 的 text 方法插入文本。如果擔(dān)心XSS攻擊，那就使用文本 |
| placement | string function | 'top' | 設(shè)置提示條的位置，取值：top | bottom | left | right |
| selector | string | false | 如果提供了選擇器，在觸發(fā)該選擇器時(shí)才顯示提示信息 |
| template | string | \[1\] | 使用HTML面板創(chuàng)建工具提示。工具提示的title將被注入到.tooltip-inner中。.tooltip-arrow成為工具提示的箭頭。最外層的包裝元素應(yīng)該擁有.tooltip類|
| title | string function | '' | 如果title屬性不存在，則使用默認(rèn)值 '' |
|trigger|string|'hover focus'|工具提示的觸發(fā)方式：click 、hover 、 focus 、manual?？梢詡魅攵鄠€(gè)觸發(fā)方式，以空格分隔。manual不能與其他觸發(fā)方式組合使用|viewportstring | object | function{ selector: 'body', padding: 0 }使工具提示始終在元素的邊界之內(nèi)。
viewport|string \| object \| function|{ selector: 'body', padding: 0 }|使工具提示始終在元素的邊界之內(nèi)。
```markdown
表中 [1] 表示：
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
```
使用選項(xiàng)時(shí)，JavaScript使用以下語(yǔ)法格式來(lái)觸發(fā)工具提示：
$('#example').tooltip(options)
其中，'#example' 為需要顯示工具提示的頁(yè)面元素，options 為使用對(duì)象表示的的選項(xiàng)。如，以下代碼將以HTML文本格式顯示一幅圖像作為工具提示的內(nèi)容，并延遲一秒顯示、延遲半秒隱藏：
```html
<a href="##">小鳥(niǎo)</a>
```
```js
$('a').tooltip({
html:true,
title:'<p>一只小鳥(niǎo)</p> <img src="../img/timg.jpg" width="170px" height="170px"/>',
placement:'bottom',
delay:{show:500,hide:100}
})
```
運(yùn)行效果如下：
*****
**工具提示插件的方法**
1、.tooltip(options)
使用一個(gè)可選的對(duì)象參數(shù) options調(diào)用某個(gè)頁(yè)面元素的工具提示。如：
```js
$('某個(gè)元素').tooltip({
html:true,
title:'<p>一只小鳥(niǎo)</p> <img src="../img/timg.jpg" width="170px" height="170px"/>',
placement:'bottom',
delay:{show:500,hide:100}
})
```
2、.tooltip('show')
手動(dòng)觸發(fā)某個(gè)頁(yè)面元素的工具提示，并在工具提示被實(shí)際顯示出來(lái)之前（即shown.bs.tooltip事件被觸發(fā)之前）返回主調(diào)函數(shù)。如：
```js
$('#element').tooltip('show')
```
3、.tooltip('hide')
手動(dòng)隱藏某個(gè)頁(yè)面元素的工具提示，并在工具提示被實(shí)際顯示出來(lái)之前（即hidden.bs.tooltip事件被觸發(fā)之前）返回主調(diào)函數(shù)。如：
```js
$('#element').tooltip('hide')
```
4、.tooltip('toggle')
手動(dòng)打開(kāi)或隱藏某個(gè)頁(yè)面元素的工具提示，并在工具提示被實(shí)際顯示出來(lái)之前（即shown.bs.tooltip或hidden.bs.tooltip事件被觸發(fā)之前）返回主調(diào)函數(shù)。如：
```js
$('#element').tooltip('toggle')
```
5、.tooltip('destroy')
手動(dòng)隱藏并銷毀某個(gè)頁(yè)面元素的工具提示。如：
```js
$('#element').tooltip('destroy')
```
*****
**工具提示插件的事件**
Bootstrap為工具提示插件提供了 5 個(gè)事件，通過(guò)監(jiān)聽(tīng)這些事件，可以對(duì)特定操作階段的用戶行為作出響應(yīng)。
| 事件 | 含義 |
| --- | --- |
| show.bs.tooltip | show方法調(diào)用之后，立即觸發(fā)該事件。 |
| shown.bs.tooltip | 當(dāng)工具提示已經(jīng)對(duì)用戶可見(jiàn)（并且過(guò)渡效果執(zhí)行完畢）之后，觸發(fā)該事件 |
| hide.bs.tooltip | hide方法調(diào)用之后，立即觸發(fā)該事件 |
| hidden.bs.tooltip | 當(dāng)工具提示已經(jīng)被隱藏（并且過(guò)渡效果執(zhí)行完畢）之后，觸發(fā)該事件 |
| inserted.bs.tooltip | 當(dāng)向DOM插入工具提示模板時(shí)，在模板插入完成并且show.bs.tooltip觸發(fā)事件之后，觸發(fā)該事件。 |
```js
$('#myTooltip').on('hidden.bs.tooltip',?function?()?{
??? alert("工具提示已經(jīng)隱藏。");
});
```
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項(xiàng)
- 2、柵格系統(tǒng)
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應(yīng)式工具
- 第三章 . bootstrap相關(guān)CSS應(yīng)用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關(guān)系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標(biāo)
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導(dǎo)航
- 7、導(dǎo)航條
- 8、路徑導(dǎo)航
- 9、分頁(yè)
- 10、標(biāo)簽
- 11、徽章
- 12、巨幕
- 13、頁(yè)頭
- 14、縮略圖
- 15、警告框
- 16、進(jìn)度條
- 17、媒體對(duì)象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過(guò)渡效果 (transition.js)
- 3、模態(tài)框 （modal.js）
- 4、下拉菜單 （dropdown.js）
- 5、滾動(dòng)監(jiān)聽(tīng) （scrollspy.js）
- 6、可切換標(biāo)簽 （tab.js）
- 7、工具提示 （tooltip.js）
- 8、彈出框 （popover.js）
- 9、警告信息 （alert.js）
- 10、按鈕 （button.js）
- 11、折疊插件（collapse.js）
- 12、輪播插件（carousel.js）
- 13、Affix插件（affix.js）