搜尋
首頁web前端Bootstrap教程Bootstrap中怎麼使用提示工具？提示組件用法淺析

Bootstrap中怎麼使用提示工具？提示組件用法淺析

青灯夜游
青灯夜游
Dec 07, 2021 pm 07:12 PM
bootstrap工具提示

Bootstrap中怎麼使用提示工具？以下這篇文章跟大家介紹一下Bootstrap5中彈出提示和工具提示組件的用法，希望對大家有幫助！

Bootstrap中怎麼使用提示工具？提示組件用法淺析

這幾要講兩個控制項：彈出提示（Popovers）和工具提示（Tooltips），這兩個元件功能都很單一，用法也很簡單，有很多相似之處。 【相關建議：《bootstrap教學》】

#彈出提示（Popovers）

1  範例

##1.1  注意事項

    使用popover外掛程式時需要注意的事項：
  • 它必須依賴bootstrap.bundle.min.js才能運作！
由於效能原因，popover是可選加入的，所以您必須自己初始化它們。

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

#初始化頁面上所有popover的一種方法是透過其data-bs-toggle屬性來選擇它們：Bootstrap中怎麼使用提示工具？提示組件用法淺析

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            点此按钮弹出提示
        </button>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popoverTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="popover"]&#39;))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
        })
     </script>
  </body>
</html>

1.3  使用容器選項

當父元素上的某些樣式幹擾popover時，您需要指定一個自訂容器，以便popover的HTML顯示在該元素中。這個和上面一個在顯示上沒什麼區別，只是在button類別中增加了一個example-popover。 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" 
            class="btn btn-lg btn-danger example-popover" 
            data-bs-toggle="popover" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            点此按钮弹出提示
        </button>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popover = new bootstrap.Popover(document.querySelector(&#39;.example-popover&#39;), {
            container: &#39;body&#39;
            })
     </script>
  </body>
</html>

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" 
            id="example-popover"    
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            点此按钮弹出提示
        </button>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popover = new bootstrap.Popover(document.querySelector(&#39;#example-popover&#39;), {
            container: &#39;body&#39;
            })
     </script>
  </body>
</html>
#2 改變彈出方向

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

要注意的是，要顯示的位置必須有足夠的空間，否則，會自動尋找合適的位置，如你設定了顯示在上部，但上面已經在瀏覽器最上方了，則會顯示在下面。 Bootstrap中怎麼使用提示工具？提示組件用法淺析

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            默认
        </button>

        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            data-bs-placement="top" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            上部
        </button>

        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            data-bs-placement="bottom" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            下部
        </button>

        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            data-bs-placement="left" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            左侧
        </button>

        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            data-bs-placement="right" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            右侧
        </button>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popoverTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="popover"]&#39;))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
        })
     </script>
  </body>
</html>

3 再一次任意關閉

預設情況下，點選按鈕顯示提示訊息，再次點選此按鈕訊息隱藏，否則訊息會一直顯示。 我們想再次點擊任意處就關閉先前顯示的提示訊息，則需要給按鈕增加一個data-bs-trigger="focus"屬性，並在js檔案中增加

trigger: 'focus '

。

要實現正確的跨瀏覽器和跨平台行為，必須使用a標記，而不是button標記，並且還必須包含tabindex屬性。 Bootstrap中怎麼使用提示工具？提示組件用法淺析

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <a tabindex="0" 
        class="btn btn-lg btn-danger" 
        role="button" data-bs-toggle="popover" 
        data-bs-trigger="focus" 
        title="提示标题" 
        data-bs-content="你想告诉别人些什么提示？你可以写在这里！"   >
        点此按钮弹出提示，点击空白处提示消失
    </a>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popoverTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="popover"]&#39;))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
        trigger: &#39;focus&#39;
        })
     </script>
  </body>
</html>

工具提示（Tooltips）

工具提示（Tooltips）和彈出提示框（Popovers）非常類似，也是可選加載的，必須自己初始化。其顯示方式也會 根據預留空間自動調整。與彈出提示不同的是，工具提示在滑鼠懸停在按鈕的時候就會顯示，滑鼠離開自動隱藏，不需要點擊。 1 工具提示生效程式碼

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="tooltip"]&#39;))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
2  工具提示範例

工具提示一般用在按鈕和連結上，用以說明其功能，當然也可以用在圖片上。 title的值就是滑鼠懸停顯示的內容，可以使用html元素。

連結有預設的title屬性，其提示文字顯示在瀏覽器狀態欄，這個顯示的更直觀。 Bootstrap中怎麼使用提示工具？提示組件用法淺析

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>工具提示</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="这个是按钮提示">
          按钮提示
          </button>
          <a href="#" data-bs-toggle="tooltip" title="这个是链接提示">链接提示</a>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="tooltip"]&#39;))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
      })
   </script>
  </body>
</html>

3 工具提示顯示位置

跟彈窗提示一樣支援四個工具提示方向，分別是top、bottom、left、right。 Bootstrap中怎麼使用提示工具？提示組件用法淺析

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="顶部提示">
          顶部提示
          </button>
          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="右侧提示">
          右侧提示
          </button>
          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="底部提示">
          底部提示
          </button>
          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="左侧提示">
          左侧提示
          </button>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="tooltip"]&#39;))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
      })
   </script>
  </body>
</html>

4 用於文章中提示

Bootstrap中怎麼使用提示工具？提示組件用法淺析

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <div class="bd-example tooltip-demo">
            <p>
                最近<a href="#" data-bs-toggle="tooltip" title="哔哩哔哩">B站</a> 是迎来了自己12周年的纪念日，
                之前吧，B站做过好些<a href="#" data-bs-toggle="tooltip" title="点此查看流行语盘点内容">流行语盘点</a>，
                比如“awsl”一类的词，不少朋友都刷过，甚至有的<a href="#" data-bs-toggle="tooltip" title="相当于现代典故">梗</a>还出圈了，
                像是后那个什么浪一类的，我留意到B站官方很多时候还会做一些相关的科普盘点啥的，时不时有推送。
            </p>
          </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="tooltip"]&#39;))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
      })
   </script>
  </body>
</html>

可以結合通用類別做出更多效果

###兩種提示的文字部分都可以使用html和bootstrap的通用類，設定間隔、排版、字體、顏色等，你可以自己嘗試做出更多很酷的效果。 ###

更多關於bootstrap的相關知識，可在：bootstrap基礎教學！ ！

以上是Bootstrap中怎麼使用提示工具？提示組件用法淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除
相關文章
Bootstrap與其他框架：比較概述Bootstrap與其他框架：比較概述Apr 18, 2025 am 12:06 AM

Bootstrap優於TailwindCSS、Foundation和Bulma，因為它易用且快速開發響應式網站。 1.Bootstrap提供豐富的預定義樣式和組件庫。 2.其CSS和JavaScript庫支持響應式設計和交互功能。 3.適合快速開發，但自定義樣式可能較複雜。

在React中集成引導樣式：方法和技術在React中集成引導樣式：方法和技術Apr 17, 2025 am 12:04 AM

在React項目中整合Bootstrap可以通過兩種方法：1)使用CDN引入，適合小型項目或快速原型設計；2)使用npm包管理器安裝，適用於需要深度定制的場景。通過這些方法，你可以在React中快速構建美觀且響應式的用戶界面。

React的引導：優勢和最佳實踐React的引導：優勢和最佳實踐Apr 16, 2025 am 12:17 AM

將Bootstrap集成到React項目中的優勢包括：1)快速開發，2)一致性和可維護性，3)響應式設計。通過直接引入CSS文件或使用React-Bootstrap庫，可以在React項目中高效使用Bootstrap的組件和样式。

Bootstrap：網絡框架的快速指南Bootstrap：網絡框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter開發的框架，幫助快速搭建響應式、移動優先的網站和應用。 1.易用性和豐富組件庫使開發更快。 2.龐大社區提供支持和解決方案。 3.通過CDN引入並使用類名控製樣式，如創建響應式網格。 4.可自定義樣式和擴展組件。 5.優點包括快速開發和響應式設計，缺點是樣式一致性和學習曲線。

打破bootstrap：是什麼以及為什麼重要打破bootstrap：是什麼以及為什麼重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree，開放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem，流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap：使網頁設計更容易Bootstrap：使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼；2)內置網格系統簡化了響應式佈局的創建；3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響：加速網絡開發Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

理解引導：核心概念和功能理解引導：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架，主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件，方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件，通過媒體查詢實現響應式設計。 3)使用示例包括基本用法，如創建按鈕，以及高級用法，如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件，建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現，最佳實踐包括使用語義化HTML和Bootstrap的預定義

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
威爾R.E.P.O.有交叉遊戲嗎？
1 個月前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7554
15
CakePHP 教程
1382
52
steam的賬戶名稱是什麼格式
83
11
win11激活密鑰永久
59
19
NYT連接提示和答案
24
96
顯示更多