工具提示
當鼠標移動到特定元素上時，顯示相關的提示信息，比如給出鏈接說明或縮寫詞的全稱等，是一個非常人性化的功能。
HTML本身就支持這樣的功能，只需給任何元素添加 title 屬性，當鼠標懸停時，瀏覽器就會將 title 屬性的值作爲提示信息顯示出來。
由於原生的工具提示樣式單調、功能單一，經常需要自己去開發相關的工具提示功能。鑑於此，Bootstrap提供了一個工具提示插件，它功能完善，使用簡單、靈活，深受廣大開發者的喜愛。
Bootstrap的工具提示插件（tooltip.js）的原型是 Jason Frame 開發的 jQuery.tipsy 插件，但Tooltips做了很多改進，它不需要依賴圖片，而是改用CSS3實現動畫效果，用data屬性存儲標題信息。
使用方法
可以給任何元素添加 title 屬性或 data-original-title 屬性，來定義提示的內容。工具提示插件優先使用 title 屬性的值作爲提示內容，如果沒有提供 title 屬性或它的值爲空，才使用 data-original-title 屬性的值作爲提示內容。以下兩種聲明方式的效果相同：
<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>
由於性能的原因，不能通過 data 屬性直接激活工具提示插件，需要通過Javascript代碼手動初始化它。只有初始化之後，將鼠標移動到鏈接上，纔會顯示相關的提示信息。否則，是不會顯示任何提示信息的。
手動初始化工具提示插件的方法很多。最簡單的方法，是通過data-toggle屬性一次性初始化頁面上的所有工具提示對象。如：
$(function () {$('[data-toggle="tooltip"]').tooltip();})
手動初始化工具提示插件之後，當鼠標在鏈接上懸停時，就會顯示相應的提示內容。運行結果如圖 4‑5所示：
圖4-5 工具提示
當然，你也可以單獨初始化某個工具提示對象。比如，以下代碼就只激活 id='#example' 的元素上定義的工具提示：
<p id="example">Tooltip Example</p>$('#example').tooltip()
無論是一次性初始化頁面上的所有工具提示對象，還是單獨初始化某個工具提示對象，都可以提供一個自定義選項，來定製你的工具提示對象。如，以下代碼就通過placement 選項指定在右側彈出工具提示：
<script>$('#example').tooltip({placement: "right"});</script>
默認情況下，提示框在目標對象的頂部顯示，通過 data-placement 屬性，可以設置提示框的顯示位置，可選值有 top | bottom | left | right。效果如圖 4‑6所示：
圖4-6 工具提示的顯示位置
關於作者
歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭祕CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。