這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap如何實(shí)現(xiàn)提示框效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)是專業(yè)的陸港網(wǎng)站建設(shè)公司，陸港接單;提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行陸港網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

前面的話

提示框是一個(gè)比較常見的功能，一般來(lái)說(shuō)是鼠標(biāo)移動(dòng)到特定元素上時(shí)，顯示相關(guān)的提示語(yǔ)。本文將詳細(xì)介紹Bootstrap提示框

基本用法

Bootstrap框架中的提示框，結(jié)構(gòu)非常簡(jiǎn)單，常常使用的是按鈕標(biāo)簽或者鏈接標(biāo)簽來(lái)制作。不管是使用按鈕還是鏈接來(lái)制作提示框，他們都需要滿足下列條件：

1、通過(guò) title 屬性的值來(lái)定義提示信息(也可以使用自定義屬性 data-original-title 來(lái)設(shè)置提示信息)，title屬性的優(yōu)先級(jí)高

2、通過(guò) data-placement 自定義屬性來(lái)控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個(gè)值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊

3、還有一個(gè)最重要的參數(shù)不可缺少，data-toggle="tooltip"

【觸發(fā)方式】

Bootstrap框架中的提示框的觸發(fā)方式和前面介紹的插件略有不同。不能直接通過(guò)自定義的屬性 data- 來(lái)觸發(fā)。必須得依賴于JavaScript的代碼觸發(fā)

最簡(jiǎn)單的觸發(fā)方式如下：

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

提示框居左

提示框在頂部 提示框在底部 提示框居右

屬性參數(shù)

提示框組件提供了7個(gè)自定義屬性參數(shù)，用來(lái)對(duì)提示框進(jìn)行設(shè)置

無(wú)動(dòng)畫
有動(dòng)畫
hover觸發(fā)
click觸發(fā)
不延遲
延遲500ms

JS觸發(fā)

除了上面所說(shuō)的最簡(jiǎn)單的一種觸發(fā)方法，也可以單獨(dú)指定一個(gè)元素，在該元素上調(diào)用Tooltip組件，并且還可以提供各種javascript形式的自定義參數(shù)，而無(wú)需使用以data-開頭的元素自定義屬性

$(element).tooltip(options);

按鈕

【關(guān)鍵字】

除了使用options對(duì)象，還可以使用關(guān)鍵字，'show'、'hide'、'toggle'、'destroy'

按鈕1
按鈕2
按鈕3
按鈕4

【事件】

該插件支持5種類型的事件訂閱

1. show.bs.tooltip        show方法調(diào)用之后立即觸發(fā)該事件

2. shown.bs.tooltip   　　 此事件在tooltip已經(jīng)顯示出來(lái)（并且同時(shí)在 CSS 過(guò)渡效果完成）之后被觸發(fā)

3. hide.bs.tooltip        hide方法調(diào)用之后立即觸發(fā)該事件。

4. hidden.bs.tooltip    　此事件在tooltip被隱藏（并且同時(shí)在 CSS 過(guò)渡效果完成）之后被觸發(fā)

5. inserted.bs.tooltip    當(dāng)tooltip模板加載到DOM中上時(shí)，在show.bs.tooltip觸發(fā)后，觸發(fā)該事件

 按鈕

關(guān)于“Bootstrap如何實(shí)現(xiàn)提示框效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。