本篇內(nèi)容主要講解“Bootstrap中如何使用提示工具”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Bootstrap中如何使用提示工具”吧!

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)十年經(jīng)驗(yàn)成就非凡，專業(yè)從事成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)，成都網(wǎng)頁設(shè)計(jì)，成都網(wǎng)頁制作，軟文推廣，廣告投放平臺(tái)等。十年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：18980820575，我們期待您的來電！

這幾要講兩個(gè)控件：彈出提示（Popovers）和工具提示（Tooltips），這兩個(gè)組件功能都很單一，用法也很簡單，有很多相似之處。

彈出提示（Popovers）

1  示例

1.1  注意事項(xiàng)

使用popover插件時(shí)需要注意的事項(xiàng)：

• 它必須依靠bootstrap.bundle.min.js才能工作！

• 由于性能原因，popover是可選加入的，所以您必須自己初始化它們。

1.2  在任何地方啟用彈出窗口

初始化頁面上所有popover的一種方法是通過其data-bs-toggle屬性選擇它們：

  
    
    
    
    
    
    
  
  
    

        




        
            點(diǎn)此按鈕彈出提示
        
        
      
     
     
  

1.3  使用容器選項(xiàng)

當(dāng)父元素上的某些樣式干擾popover時(shí)，您需要指定一個(gè)自定義容器，以便popover的HTML顯示在該元素中。這個(gè)和上面一個(gè)在顯示上沒什么區(qū)別，只是在button類中增加了一個(gè)example-popover。

  
    
    
    
    
    
    
  
  
    

        




        
            點(diǎn)此按鈕彈出提示
        
        
      
     
     
  

你也可以使用id，這樣看起來似乎更好懂

  
    
    
    
    
    
    
  
  
    

        




        
            點(diǎn)此按鈕彈出提示
        
      
     
     
  

2 改變彈出方向

我們可以讓彈出的提示信息在四個(gè)方向：頂部，右側(cè)，底部，左側(cè)。 使用也很簡單，只需要將data-bs-placement="位置" 添加到button屬性即可，其中位置可以是top、bottom、left、right。

需要注意的是，要顯示的位置必須有足夠的空間，否則，會(huì)自動(dòng)尋找合適的位置，如你設(shè)置了顯示在上部，但上面已經(jīng)在瀏覽器最上方了，則會(huì)顯示在下面。

  
    
    
    
    
    
    
  
  
    

        




        
            默認(rèn)
        

        
            上部
        

        
            下部
        

        
            左側(cè)
        

        
            右側(cè)
        
      
     
     
  

3 再一次任意處關(guān)閉

默認(rèn)情況下，單擊按鈕顯示提示消息，再次點(diǎn)擊此按鈕消息隱藏，否則消息會(huì)一直顯示。 我們想再次點(diǎn)擊任意處就關(guān)閉此前顯示的提示信息，則需要給按鈕增加一個(gè)data-bs-trigger="focus"屬性，并在js文件中增加trigger: 'focus'。

要實(shí)現(xiàn)正確的跨瀏覽器和跨平臺(tái)行為，必須使用a標(biāo)記，而不是button標(biāo)記，并且還必須包含tabindex屬性。

  
    
    
    
    
    
    
  
  
    

        




        
        點(diǎn)此按鈕彈出提示，點(diǎn)擊空白處提示消失
    
      
     
     
  

工具提示（Tooltips）

工具提示（Tooltips）和彈出提示框（Popovers）非常類似，也是可選加載的，必須自己初始化。其顯示方式也會(huì) 根據(jù)預(yù)留空間自動(dòng)調(diào)整。與彈出提示不同的是，工具提示在鼠標(biāo)懸停在按鈕的時(shí)候就會(huì)顯示，鼠標(biāo)離開自動(dòng)隱藏，不需要點(diǎn)擊。

1 工具提示生效代碼

和彈窗提示基本類似，頁面中必須包含此代碼，工具提示才能生效。

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})

2  工具提示示例

工具提示一般用在按鈕和鏈接上，用以說明其功能，當(dāng)然也可以用在圖片上。title的值就是鼠標(biāo)懸停顯示的內(nèi)容，可以使用html元素。

鏈接有默認(rèn)的title屬性，其提示文字顯示在瀏覽器狀態(tài)欄，這個(gè)顯示的更直觀。

  
    
    
    
    
    
    
  
  
    

        




        
          按鈕提示
          
          鏈接提示

      
     
     
  

3 工具提示顯示位置

跟彈窗提示一樣支持四個(gè)工具提示方向，分別是top、bottom、left、right。

  
    
    
    
    
    
    
  
  
    

        




        
          頂部提示
          
          
          右側(cè)提示
          
          
          底部提示
          
          
          左側(cè)提示
          

      
     
     
  

4 用于文章中提示

  
    
    
    
    
    
    
  
  
    

        




        
            

                最近B站 是迎來了自己12周年的紀(jì)念日，
                之前吧，B站做過好些流行語盤點(diǎn)，
                比如“awsl”一類的詞，不少朋友都刷過，甚至有的梗還出圈了，
                像是后那個(gè)什么浪一類的，我留意到B站官方很多時(shí)候還會(huì)做一些相關(guān)的科普盤點(diǎn)啥的，時(shí)不時(shí)有推送。