## 工具提示 tooltip.js Bootstrap?提示工具（Tooltip）插件工具可以通過鼠標移動到選定的特定的元素上時，顯示出相關的提示語。當您想要描述一個鏈接的時候，提示工具（Tooltip）就顯得非常有用。提示工具（Tooltip）插件做了很多改進，例如不需要依賴圖像，而是改用 CSS 實現動畫效果，用 data 屬性存儲標題信息。 靜態樣式：  **用法** 提示工具（Tooltip）插件根據需求生成內容和標記，默認情況下是把提示工具（tooltip）放在它們的觸發元素后面。有以下兩種方式添加提示工具（tooltip）： * **通過 data 屬性**：如需添加一個提示工具（tooltip），只需向一個錨標簽添加**data-toggle="tooltip"**即可。錨的 title 即為提示工具（tooltip）的文本。默認情況下，插件把提示工具（tooltip）設置在頂部。 ```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> ``` * **通過 JavaScript**：通過 JavaScript 觸發提示工具（tooltip）： ```js $('#identifier').tooltip(options) ``` > 由于性能的原因，不能通過 data 屬性直接激活工具提示插件，需要通過Javascript代碼手動初始化它。只有初始化之后，將鼠標移動到鏈接上，才會顯示相關的提示信息。否則，是不會顯示任何提示信息的。 ~~~ $(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. 不要試圖顯示隱藏元素的工具提示。當目標元素為display:none；時調用$（…）.tooltip（'show'）將導致工具提示的位置不正確。 >2. 禁用元素的工具提示需要包裝元素。要向disabled或.disabled元素添加工具提示，請將該元素放在\<div\>內，并將工具提示應用于該\<div\>。 ***** **工具提示插件的選項** Bootstrap為工具提示插件提供了 10 個選項，所有的選項都可以通過 data 屬性或JavaScript進行設置。 | 名稱 | 類型 | 默認值 | 說明 | | --- | --- | --- | --- | | animation | boolean | true | 為工具提示應用CSS淡入淡出過渡效果 | | container | string false | false | 將提示條附加到特定元素，如 container: 'body' | | delay | number object | 0 | 延遲顯示和隱藏提示條的時間（毫秒）——手動觸發提示條時無效如果只指定一個數值，則隱藏和顯示都使用該數值。對象的結構為 delay: { show: 500, hide: 100 }| | html | boolean | false | 提示條支持插入 HTML。如果取值為 false，則使用 jQuery 的 text 方法插入文本。如果擔心XSS攻擊，那就使用文本 | | placement | string function | 'top' | 設置提示條的位置，取值：top | bottom | left | right | | selector | string | false | 如果提供了選擇器，在觸發該選擇器時才顯示提示信息 | | template | string | \[1\] | 使用HTML面板創建工具提示。工具提示的title將被注入到.tooltip-inner中。.tooltip-arrow成為工具提示的箭頭。最外層的包裝元素應該擁有.tooltip類| | title | string function | '' | 如果title屬性不存在，則使用默認值 '' | |trigger|string|'hover focus'|工具提示的觸發方式：click 、hover 、 focus 、manual。可以傳入多個觸發方式，以空格分隔。manual不能與其他觸發方式組合使用|viewportstring | object | function{ selector: 'body', padding: 0 }使工具提示始終在元素的邊界之內。 viewport|string \| object \| function|{ selector: 'body', padding: 0 }|使工具提示始終在元素的邊界之內。 ```markdown 表中 [1] 表示： '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' ``` 使用選項時，JavaScript使用以下語法格式來觸發工具提示： $('#example').tooltip(options) 其中，'#example' 為需要顯示工具提示的頁面元素，options 為使用對象表示的的選項。如，以下代碼將以HTML文本格式顯示一幅圖像作為工具提示的內容，并延遲一秒顯示、延遲半秒隱藏： ```html <a href="##">小鳥</a> ``` ```js $('a').tooltip({ html:true, title:'<p>一只小鳥</p> <img src="../img/timg.jpg" width="170px" height="170px"/>', placement:'bottom', delay:{show:500,hide:100} }) ``` 運行效果如下：  ***** **工具提示插件的方法** 1、.tooltip(options) 使用一個可選的對象參數 options調用某個頁面元素的工具提示。如： ```js $('某個元素').tooltip({ html:true, title:'<p>一只小鳥</p> <img src="../img/timg.jpg" width="170px" height="170px"/>', placement:'bottom', delay:{show:500,hide:100} }) ``` 2、.tooltip('show') 手動觸發某個頁面元素的工具提示，并在工具提示被實際顯示出來之前（即shown.bs.tooltip事件被觸發之前）返回主調函數。如： ```js $('#element').tooltip('show') ``` 3、.tooltip('hide') 手動隱藏某個頁面元素的工具提示，并在工具提示被實際顯示出來之前（即hidden.bs.tooltip事件被觸發之前）返回主調函數。如： ```js $('#element').tooltip('hide') ``` 4、.tooltip('toggle') 手動打開或隱藏某個頁面元素的工具提示，并在工具提示被實際顯示出來之前（即shown.bs.tooltip或hidden.bs.tooltip事件被觸發之前）返回主調函數。如： ```js $('#element').tooltip('toggle') ``` 5、.tooltip('destroy') 手動隱藏并銷毀某個頁面元素的工具提示。如： ```js $('#element').tooltip('destroy') ``` ***** **工具提示插件的事件** Bootstrap為工具提示插件提供了 5 個事件，通過監聽這些事件，可以對特定操作階段的用戶行為作出響應。 | 事件 | 含義 | | --- | --- | | show.bs.tooltip | show方法調用之后，立即觸發該事件。 | | shown.bs.tooltip | 當工具提示已經對用戶可見（并且過渡效果執行完畢）之后，觸發該事件 | | hide.bs.tooltip | hide方法調用之后，立即觸發該事件 | | hidden.bs.tooltip | 當工具提示已經被隱藏（并且過渡效果執行完畢）之后，觸發該事件 | | inserted.bs.tooltip | 當向DOM插入工具提示模板時，在模板插入完成并且show.bs.tooltip觸發事件之后，觸發該事件。 | ```js $('#myTooltip').on('hidden.bs.tooltip',?function?()?{ ??? alert("工具提示已經隱藏。"); }); ```