工具提示

文檔和示例使用 CSS3 添加自定義 Bootstrap 工具提示，使用 CSS3 進行動畫和數據屬性用於本地標題存儲。

概述

使用工具提示插件時要知道的事情：

工具提示依賴第三方庫Popper.js進行定位。您必須在 bootstrap.js 之前包含popper.min.js或使用bootstrap.bundle.min.js/bootstrap.bundle.js其中包含 Popper.js 以使工具提示起作用！
如果您從源代碼構建我們的 JavaScript，它需要util.js.
出於性能原因，工具提示是可選的，因此您必須自己初始化它們。
從不顯示具有零長度標題的工具提示。
指定container: 'body'以避免在更複雜的組件（如我們的輸入組、按鈕組等）中出現渲染問題。
在隱藏元素上觸發工具提示將不起作用。
.disabled或元素的工具提示disabled必須在包裝元素上觸發。
當從跨越多行的超鏈接觸發時，工具提示將居中。white-space: nowrap;在你的 s 上使用<a>以避免這種行為。
在從 DOM 中刪除相應元素之前，必須隱藏工具提示。

明白了嗎？太好了，讓我們通過一些示例來看看它們是如何工作的。

示例：隨處啟用工具提示

初始化頁面上所有工具提示的一種方法是通過它們的data-toggle屬性來選擇它們：

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

例子

將鼠標懸停在下面的鏈接上以查看工具提示：

將鼠標懸停在下面的按鈕上可查看四個工具提示方向：頂部、右側、底部和左側。

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

並添加了自定義 HTML：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

用法

工具提示插件按需生成內容和標記，默認情況下將工具提示放置在其觸發元素之後。

通過 JavaScript 觸發工具提示：

$('#example').tooltip(options)

標記

工具提示所需的標記只是一個data屬性，並且title在您希望擁有工具提示的 HTML 元素上。生成的工具提示標記相當簡單，儘管它確實需要一個位置（默認情況下，top由插件設置）。

使工具提示適用於鍵盤和輔助技術用戶

您應該只將工具提示添加到傳統上可通過鍵盤聚焦和交互的 HTML 元素（例如鍊接或表單控件）。儘管可以通過添加屬性使任意 HTML 元素（例如<span>s）成為焦點tabindex="0"，但這會在非交互式元素上為鍵盤用戶添加可能令人討厭和令人困惑的製表位。此外，目前大多數輔助技術都不會在這種情況下公佈工具提示。

此外，不要僅僅依靠hover作為工具提示的觸發器，因為這會使鍵盤用戶無法觸發工具提示。

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

禁用元素

具有該disabled屬性的元素不是交互式的，這意味著用戶無法聚焦、懸停或單擊它們來觸發工具提示（或彈出框）。作為一種解決方法，您需要從包裝器<div>或觸發工具提示<span>，理想情況下使用使鍵盤可聚焦tabindex="0"，並覆蓋pointer-events禁用元素上的。

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到中data-，如data-animation="".

姓名	類型	默認	描述
動畫	布爾值	真的	對工具提示應用 CSS 淡入淡出過渡
容器	字符串 \| 元素 \| 錯誤的	錯誤的	將工具提示附加到特定元素。示例：`container: 'body'`。此選項特別有用，因為它允許您將工具提示定位在文檔流中靠近觸發元素的位置 - 這將防止工具提示在窗口調整大小期間從觸發元素浮動。
延遲	號碼 \| 目的	0	延遲顯示和隱藏工具提示 (ms) - 不適用於手動觸發類型如果提供了一個數字，延遲將應用於隱藏/顯示對象結構為：`delay: { "show": 500, "hide": 100 }`
html	布爾值	錯誤的	在工具提示中允許 HTML。如果為 true，則工具提示中的 HTML 標記`title`將在工具提示中呈現。如果為 false，jQuery 的`text`方法將用於將內容插入 DOM。如果您擔心 XSS 攻擊，請使用文本。
放置	字符串 \| 功能	'最佳'	如何定位工具提示 - 自動 \| 頂部 \| 底部 \| 離開 \| 正確的。指定時`auto`，它將動態地重新定向工具提示。當一個函數用於確定位置時，它會以工具提示 DOM 節點作為其第一個參數，觸發元素 DOM 節點作為其第二個參數來調用。`this`上下文設置為工具提示實例。
選擇器	字符串 \| 錯誤的	錯誤的	如果提供了選擇器，則工具提示對象將被委託給指定的目標。在實踐中，這用於啟用動態 HTML 內容以添加彈出框。請參閱this和一個內容豐富的示例。
模板	細繩	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	創建工具提示時要使用的基本 HTML。工具提示`title`將被注入到`.tooltip-inner`. `.arrow`將成為工具提示的箭頭。最外層的包裝元素應該有`.tooltip`類和`role="tooltip"`.
標題	字符串 \| 元素 \| 功能	''	`title`如果屬性不存在，則默認標題值。如果給定了一個函數，它將被調用，並將其`this`引用設置為工具提示附加到的元素。
扳機	細繩	'懸停焦點'	工具提示是如何觸發的 - 點擊 \| 懸停 \| 焦點 \| 手動的。您可以傳遞多個觸發器；用空格分隔它們。 `'manual'`指示工具提示將通過`.tooltip('show')`,`.tooltip('hide')`和`.tooltip('toggle')`方法以編程方式觸發；此值不能與任何其他觸發器組合。 `'hover'`其本身將導致無法通過鍵盤觸發的工具提示，並且僅應在存在為鍵盤用戶傳達相同信息的替代方法時使用。
抵消	號碼 \| 細繩	0	工具提示相對於其目標的偏移量。有關更多信息，請參閱 Popper.js 的偏移量文檔。
後備放置	字符串 \| 大批	'翻動'	允許指定 Popper 將在回退時使用的位置。有關更多信息，請參閱 Popper.js 的行為文檔
邊界	字符串 \| 元素	'滾動父'	工具提示的溢出約束邊界。接受、、或 HTMLElement 引用的值`'viewport'`（`'window'`僅限`'scrollParent'`JavaScript）。有關更多信息，請參閱 Popper.js 的preventOverflow 文檔。

單個工具提示的數據屬性

如上所述，可以通過使用數據屬性來指定單個工具提示的選項。

方法

異步方法和轉換

所有 API 方法都是異步的並開始一個轉換。他們在轉換開始但在結束之前立即返回給調用者。此外，過渡組件上的方法調用將被忽略。

有關更多信息，請參閱我們的 JavaScript 文檔。

`$().tooltip(options)`

將工具提示處理程序附加到元素集合。

`.tooltip('show')`

顯示元素的工具提示。在工具提示實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.tooltip這被認為是工具提示的“手動”觸發。從不顯示具有零長度標題的工具提示。

$('#element').tooltip('show')

`.tooltip('hide')`

隱藏元素的工具提示。在工具提示實際上被隱藏之前（即在事件發生之前）返回給調用者。hidden.bs.tooltip這被認為是工具提示的“手動”觸發。

$('#element').tooltip('hide')

`.tooltip('toggle')`

切換元素的工具提示。在工具提示實際顯示或隱藏之前（即在or事件發生之前）返回給調用者。這被認為是工具提示的“手動”觸發。shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

`.tooltip('dispose')`

隱藏和破壞元素的工具提示。使用委託（使用選項創建）的selector工具提示不能在後代觸發器元素上單獨銷毀。

$('#element').tooltip('dispose')

`.tooltip('enable')`

使元素的工具提示能夠顯示。默認情況下啟用工具提示。

$('#element').tooltip('enable')

`.tooltip('disable')`

移除顯示元素工具提示的能力。工具提示只有在重新啟用後才能顯示。

$('#element').tooltip('disable')

`.tooltip('toggleEnabled')`

切換顯示或隱藏元素工具提示的能力。

$('#element').tooltip('toggleEnabled')

`.tooltip('update')`

更新元素工具提示的位置。

$('#element').tooltip('update')

活動

事件類型	描述
show.bs.tooltip	`show`調用實例方法時立即觸發此事件。
顯示的.bs.tooltip	當工具提示對用戶可見時觸發此事件（將等待 CSS 轉換完成）。
hide.bs.tooltip	`hide`調用實例方法時立即觸發此事件。
hidden.bs.tooltip	當工具提示完成對用戶隱藏時觸發此事件（將等待 CSS 轉換完成）。
插入的.bs.tooltip	此事件`show.bs.tooltip`在工具提示模板添加到 DOM 的事件之後觸發。

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})