提示框

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

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

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

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

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

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

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

　　提示框提供的剩余的幾個(gè)屬性分別為

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

　　2.data-html可以將HTML作為提示語，默認(rèn)值為false

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

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

　　5.data-delay延遲提示信息默認(rèn)值為0

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

　　7.data-template提示語的默認(rèn)模板

JS使用

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

使用方式為：

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

　　tooltip同樣提供了四個(gè)事件分別為：

　　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ù)對(duì)象屬性就是前面的集中在使用時(shí)去掉"data-"即可

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

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

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

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

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

最新評(píng)論