溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Bootstrap中信息提示框的使用方法

發(fā)布時(shí)間：2021-04-14 10:43:41 來源：億速云 閱讀：288 作者：小新 欄目：web開發(fā)

小編給大家分享一下Bootstrap中信息提示框的使用方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

提示框是一個(gè)比較常見的功能，一般來說是鼠標(biāo)移動(dòng)到特定元素上時(shí)，顯示相關(guān)的提示語。

基本用法

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

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

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

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

【觸發(fā)方式】

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

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

$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
<body style="margin:80px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title="左邊提示框">提示框居左</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="提示框在頂部">提示框在頂部</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-original-title="提示框在底部">提示框在底部</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="提示框居右">提示框居右</button>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});    
</script>

Bootstrap中信息提示框的使用方法

屬性參數(shù)

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

Bootstrap中信息提示框的使用方法

<body style="margin-top:80px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="無動(dòng)畫" data-animation="false" >無動(dòng)畫</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="有動(dòng)畫" >有動(dòng)畫</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="hover觸發(fā)" data-trigger="hover">hover觸發(fā)</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="click觸發(fā)" data-trigger="click">click觸發(fā)</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="不延遲">不延遲</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="延遲500ms" data-delay="500">延遲500ms</button>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});    
</script>

Bootstrap中信息提示框的使用方法

JS觸發(fā)

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

$(element).tooltip(options);

Bootstrap中信息提示框的使用方法

<button type="button" class="btn btn-default" data-toggle="tooltip" >按鈕</button>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip({
        title:"我是提示語",
        placement:'right'
    });
});    
</script>

Bootstrap中信息提示框的使用方法

【關(guān)鍵字】

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

<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn1">按鈕1</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn2">按鈕2</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn3">按鈕3</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn4">按鈕4</button>
<script>
$(function(){
    $('#btn1').tooltip('show');//顯示提示語
    $('#btn2').tooltip('hide');//關(guān)閉提示語
    $('#btn3').tooltip('toggle');//反轉(zhuǎn)提示語
    $('#btn4').tooltip('destroy');//隱藏并銷毀提示語
});    
</script>
</body>

Bootstrap中信息提示框的使用方法

【事件】

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

show.bs.tooltip        show方法調(diào)用之后立即觸發(fā)該事件
shown.bs.tooltip   　　 此事件在tooltip已經(jīng)顯示出來（并且同時(shí)在 CSS 過渡效果完成）之后被觸發(fā)
hide.bs.tooltip        hide方法調(diào)用之后立即觸發(fā)該事件。
hidden.bs.tooltip    　此事件在tooltip被隱藏（并且同時(shí)在 CSS 過渡效果完成）之后被觸發(fā)
inserted.bs.tooltip    當(dāng)tooltip模板加載到DOM中上時(shí)，在show.bs.tooltip觸發(fā)后，觸發(fā)該事件
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="提示信息" id="btn">按鈕</button>
<script>
$(function(){
    $('#btn').tooltip();
    $("#btn").on("show.bs.tooltip",function(e){
        $(this).html('關(guān)閉提示');    
    }).on("hide.bs.tooltip",function(e){
        $(this).html('打開提示');
    })

});    
</script>

Bootstrap中信息提示框的使用方法

看完了這篇文章，相信你對“Bootstrap中信息提示框的使用方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手