Bootstrap - 工具提示

上一頁
下一頁

本章將討論新增自定義 Bootstrap 工具提示。工具提示通常顯示為一個小浮動框，當用戶將滑鼠懸停或單擊特定 UI 元素（例如按鈕、圖示或超連結）時出現。

工具提示用於為可能需要有關 UI 元素用途或功能的更多資訊的使用者提供上下文、解釋或說明。

使用工具提示外掛時需要注意的事項

  • 由於工具提示依賴於用於定位的第三方庫Popper，因此必須在bootstrap.js之前包含popper.min.js，或者使用包含 Popper 的bootstrap.bundle.min.js / bootstrap.bundle.js，才能使工具提示正常工作。

  • 由於效能原因，工具提示是可選的，因此必須先初始化它們。

  • 對於長度為零的title值，將永遠不會顯示工具提示。

  • 觸發工具提示在隱藏元素上不起作用。

  • 對於.disabled或disabled元素的工具提示必須使用包裝器元素觸發。

  • 要避免工具提示居中，請在<a>元素上使用white-space: nowrap;。

  • 在從 DOM 中移除任何元素之前，必須隱藏與其對應的工具提示。

  • 在影子 DOM 中，可以感謝某個元素觸發工具提示。

啟用工具提示

透過其data-bs-toggle屬性初始化頁面上的所有工具提示

  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

建立工具提示

向元素新增data-bs-toggle="tooltip"屬性以建立工具提示。

  • data-bs-toggle屬性定義工具提示。

  • title屬性定義要在工具提示內顯示的文字。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Bootstrap tooltip creation</h4>
      <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>
      
      <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
      </script>
  </body>
</html>

連結上的工具提示

也可以使用屬性data-bs-toggle向連結新增工具提示。讓我們來看一個例子

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip on link</h4>
    <p class="muted">The  <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

您可以在 HTML 中隨意使用title或data-bs-title。當使用title時，Popper會在元素呈現時自動將其替換為data-bs-title。

自定義工具提示

Bootstrap 提供了一個自定義類data-bs-custom-class="custom tooltip"來自定義工具提示。讓我們來看一個例子

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Custom Tooltip</h4>
    <button type="button" class="btn btn-primary"
          data-bs-toggle="tooltip" data-bs-placement="right"
          data-bs-custom-class="custom-tooltip"
          data-bs-title="Tooltip is created as custom tooltip.">
          Custom tooltip
  </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

工具提示的位置

工具提示的位置有四個選項：左、右、上和下對齊。

預設情況下，工具提示將出現在元素的頂部。

data-bs-placement屬性用於設定工具提示的位置。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.tw/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example tooltip-demo">
    <h4>Tooltip example - Position</h4>
    <button type="button"   class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"    data-bs-title="Top Tooltip">
    Top Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"  data-bs-title="Right Tooltip">
    Right Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom Tooltip">
    Bottom Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"   data-bs-title="Left Tooltip">
    Left Tooltip
    </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

帶有自定義HTML的工具提示

下面給出的示例顯示了一個添加了自定義 HTML 的工具提示。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Bootstrap tooltip creation with HTML</h4>
    
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
      Tooltip with HTML
    </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

標記

對於任何 HTML 元素上的工具提示，工具提示所需的標記只是一個data屬性和title。

生成的工具提示標記很簡單，預設設定為頂部。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Bootstrap tooltip markup</h4>
    
    <!-- HTML to write -->
    <a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a>
    <!-- Generated markup by the plugin -->
    <div class="tooltip bs-tooltip-top" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Markup for a tooltip
    </div>
    </div>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

停用元素上的工具提示

使用者無法聚焦、懸停或單擊帶有disabled屬性的元素來觸發工具提示。因此，為了觸發工具提示，請使用包裝器<div>或<span>。

使用tabindex="0"使其可透過鍵盤聚焦。

示例

這是一個停用元素上工具提示的示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip on Disabled Element</h4>
    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip Disabled">
      <button class="btn btn-secondary" type="button" disabled>Button Disabled</button>
    </span>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

選項

  • 選項名稱可以附加到類data-bs-，並且該選項可以作為屬性傳遞，例如data-bs-boundary="{value}"。

  • 透過 data 屬性傳遞選項時，請確保將大小寫型別從"camelCase"更改為"kebab-case"，例如使用data-bs-fallback-placements="[array]"而不是data-bs-fallbackPlacements="[array]"。

示例

這是一個作為屬性新增到.data-bs-類的選項示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips - Options</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip options</h4>
    <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip"  data-bs-title ="Title added through options and that overrides the title provided" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>
    
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

下表顯示了 Bootstrap 提供的各種選項，可以將其作為 data 屬性附加到類.data-bs-。

名稱 型別 預設值 描述
allowList 物件 預設值 包含允許的屬性和標籤的物件。
animation 布林值 true 將 CSS 淡入淡出過渡應用於工具提示。
boundary 字串，元素 'clippingParents' 預設情況下，它是 'clippingParents'，並且可以接受 HTML 元素引用（僅透過 JavaScript）。
container 字串，元素，false false 將工具提示附加到特定元素。
customClass 字串，函式 '' 這些類將新增到模板中指定的任何類之外。要新增多個類，請用空格分隔它們：'class-1 class-2'。
delay 數字，物件 0 顯示和隱藏工具提示的延遲（毫秒）。物件結構為：delay: { "show": 500, "hide": 100 }。
fallbackPlacements 陣列 ['top', 'right', 'bottom', 'left'] 透過提供陣列中的位置列表來定義備用位置。
html 布林值 false 允許工具提示中的 HTML。
offset 陣列，字串，函式 [0, 0] 工具提示相對於其目標的偏移量。例如：data-bs-offset="10,20"。
placement 字串，函式 'top' 決定工具提示的位置。
popperConfig null，物件，函式 null 更改 Bootstrap 的預設 Popper 配置。
sanitize 布林值 true 啟用或停用消毒。
sanitizeFn null，函式 null 您可以提供自己的消毒函式。
selector 字串，false false 使用選擇器，工具提示物件將被委託給指定的 target。
template 字串 '' 建立工具提示時，使用基本 HTML。
title 字串，元素，函式 '' 它指的是工具提示的標題。
trigger 字串 'hover-focus' 顯示工具提示的觸發方式：click、hover、focus、manual。
列印頁面
上一頁
下一頁
廣告