提示框

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

　　data-original-title可以直接寫為title,仍然能正常使用，源碼中優(yōu)先查找前者，前者不存在就會查找title

提示框不提供HTML觸發(fā)方式只能通過JS來進行觸發(fā)：

$("[data-toggle='tooltip']").tooltip();

　　提示框的關(guān)鍵屬性為data-original-title="content",該屬性就是我們要提示的信息，如果不存在該屬性則回去檢索title屬性，title的屬性值同樣可以用來顯示

　　由于提示框只能通過JS來進行觸發(fā)，而且data-toggle在BootStrap中就是一個說明功能的屬性，所以通常提示框的元素上都會設(shè)置data-toggle="tooltip"，這只是為了可以選中這個DOM節(jié)點，也可以設(shè)置為class="xx"

　　提示信息默認是在元素上邊顯示的我們可以通過屬性data-placement來進行更改,它有五個值分別為top、bottom、left、right、auto,如果設(shè)置為data-placement="auto"則選擇適當?shù)奈恢蔑@示提示信息

　　提示框提供的剩余的幾個屬性分別為

　　1.data-animation在提示信息上應(yīng)用一個fade動畫，默認值為true

　　2.data-html可以將HTML作為提示語，默認值為false

　　3.data-selector如果聲明selector表示的元素就可以提示信息

　　4.data-trigger通過什么方式來觸發(fā)提示信息，默認值為focus、hover，全部值為focus、hover、click、manual可以使用多種出發(fā)方式，使用多種時中間以空格隔開

　　5.data-delay延遲提示信息默認值為0

　　6.data-container將提示信息放在執(zhí)行的元素上，默認為false，當在.btn-group和.input-group內(nèi)使用提示信息是要設(shè)置為data-container="body"

　　7.data-template提示語的默認模板

JS使用

　　tooltip提供了四個參數(shù)分別為：show、hide、toggle、destory分別對應(yīng)顯示、隱藏、切換、銷毀

使用方式為：

$("[data-toggle=tooltip]").tooltip("show")

　　tooltip同樣提供了四個事件分別為：

　　1.show.bs.tooltip在顯示之前觸發(fā)

　　2.shown.bs.tooltip在顯示之后觸發(fā)

　　3.hide.bs.tooltip在隱藏之前觸發(fā)

　　4.hidden.bs.tooltip在隱藏之后觸發(fā)

使用方式為：

$("[data-toggle=tooltip]").on("show.bs.tooltip",function(){})

　　tooptip提供的參數(shù)對象屬性就是前面的集中在使用時去掉"data-"即可

　　基本的使用方式都很簡單，這里介紹一個selector的用法，該屬性一般用在新添加的元素仍然需要顯示提示框的場景中，所以在使用時要在提示框的父級上綁定提示框的調(diào)用方法，事件源是selector的DOM可以觸發(fā)事件，使用的就是冒泡的思想使用方式為：

$("element").tooltip({
 selector:".className"
})

　　當在.btn-group和.input-group內(nèi)的元素使用tooltip時要設(shè)置container:"body"避免不必要的副作用。

如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論