提示框

提示框的基本使用方式為：

　　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"避免不必要的副作用。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。