提示框
提示框的基本使用方式為：
復制代碼 代碼如下:<span data-toggle="tooltip" data-original-title="this is alert content">test message</span>
data-original-title可以直接寫為title,仍然能正常使用，源碼中優先查找前者，前者不存在就會查找title
提示框不提供HTML觸發方式只能通過JS來進行觸發：
$("[data-toggle='tooltip']").tooltip();
提示框的關鍵屬性為data-original-title="content",該屬性就是我們要提示的信息，如果不存在該屬性則回去檢索title屬性，title的屬性值同樣可以用來顯示
由於提示框只能通過JS來進行觸發，而且data-toggle在BootStrap中就是一個說明功能的屬性，所以通常提示框的元素上都會設置data-toggle="tooltip"，這只是為了可以選中這個DOM節點，也可以設置為class="xx"
提示信息默認是在元素上邊顯示的我們可以通過屬性data-placement來進行更改,它有五個值分別為top、bottom、left、right、auto,如果設置為data-placement="auto"則選擇適當的位置顯示提示信息
提示框提供的剩余的幾個屬性分別為
1.data-animation在提示信息上應用一個fade動畫，默認值為true
2.data-html可以將HTML作為提示語，默認值為false
3.data-selector如果聲明selector表示的元素就可以提示信息
4.data-trigger通過什麼方式來觸發提示信息，默認值為focus、hover，全部值為focus、hover、click、manual可以使用多種出發方式，使用多種時中間以空格隔開
5.data-delay延遲提示信息默認值為0
6.data-container將提示信息放在執行的元素上，默認為false，當在.btn-group和.input-group內使用提示信息是要設置為data-container="body"
7.data-template提示語的默認模板
JS使用
tooltip提供了四個參數分別為：show、hide、toggle、destory分別對應顯示、隱藏、切換、銷毀
使用方式為：
$("[data-toggle=tooltip]").tooltip("show")
tooltip同樣提供了四個事件分別為：
1.show.bs.tooltip在顯示之前觸發
2.shown.bs.tooltip在顯示之後觸發
3.hide.bs.tooltip在隱藏之前觸發
4.hidden.bs.tooltip在隱藏之後觸發
使用方式為：
$("[data-toggle=tooltip]").on("show.bs.tooltip",function(){})
tooptip提供的參數對象屬性就是前面的集中在使用時去掉"data-"即可
基本的使用方式都很簡單，這裡介紹一個selector的用法，該屬性一般用在新添加的元素仍然需要顯示提示框的場景中，所以在使用時要在提示框的父級上綁定提示框的調用方法，事件源是selector的DOM可以觸發事件，使用的就是冒泡的思想使用方式為：
$("element").tooltip({
selector:".className"
})
當在.btn-group和.input-group內的元素使用tooltip時要設置container:"body"避免不必要的副作用。
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。