可以通過數據屬性或 JavaScript 傳遞選項。 對於數據屬性,將選項名稱附加到 data-bs-中,如在 data-bs-animation="" 中一樣。 通過數據屬性傳遞選項時,請確保將名稱風格的大小寫從 camelCase 更改為 kebab-case。 例如,不使用 data-bs-customClass="beautifier",而是使用 data-bs-custom-class="beautifier"。
請注意,出於安全性的原因 sanitize, sanitizeFn, 和 allowList 選項不能透過資料屬性提供。
允許工具提示中包含 HTML。
如果為 true,title 中的 HTML 標註將被渲染於工具提示中。如果為 false,則 innerText 屬性會被用來將內容插入 DOM 中
如果您擔心 XSS 攻擊,請使用 text。
placement
string | function
'top'
如何定位工具提示 - auto | top | bottom | left | right.
當 auto 被指定時,將動態重新定位工具提示框。
當函式被用於確定位置時,它將使用工具提示的 DOM 節點作為其第一個參數,並將觸發元素的 DOM 節點作為第二個參數來進行調用。 this 將指向工具提示的實例。
selector
string | false
false
如果提供了選擇器,工具提示將被委派給指定的目標。實際上,這也用於讓工具提示得以動態的添加 DOM 元素 (jQuery.on 的輔助)。 請參閱 這個 和 an informative example。
template
string
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
創建工具提示時使用的基本 HTML
工具提示的 title 將被插入 .tooltip-inner。
.tooltip-arrow 將成為工具提示的箭頭標誌
最外層的包裝元素應該要有 .tooltip 類別,以及 role="tooltip"。
title
string | element | function
如果 title 屬性不存在之預設值
如果函式被使用,它將根據 this 所參考到的,也是工具提示所指向的元素來進行調用。
trigger
string
'hover focus'
工具提示是如何被觸發的 - click | hover | focus | manual. 您可以傳遞多個觸發器,並使用空格將他們隔開。
'manual' 表示工具提示將會透過 .tooltip('show'), .tooltip('hide') 和 .tooltip('toggle') 等方法,用編程的方式觸發,這個值不能與任何其他觸發器組合使用
'hover' 將導致鍵盤無法觸發工具提示,且應該只有當「可以向鍵盤用戶傳遞相同訊息的替代方案」存在時,才可以被使用。
fallbackPlacements
array
['top', 'right', 'bottom', 'left']
Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
Popper's behavior docs
boundary
string | element
'clippingParents'
Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default it's 'clippingParents' and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's detectOverflow docs.
customClass
string | function
在工具提示顯示的時候添加類別。請注意,除了任何在模板內指定的類別以外,這些類別也會被添加上去。用間隔如 'class-1 class-2' 來加入多個類別。
您也可以傳遞一個函式,該函式應該回傳一個單一的字串,包含要添加的類別名稱。
sanitize
boolean
Enable or disable the sanitization. If activated 'template' and 'title' options will be sanitized. See the sanitizer section in our JavaScript documentation.
allowList
object
包含允許屬性與標記的物件
sanitizeFn
null | function
你可以在這裡提供自己的 sanitize 函式。如果你更喜歡用專用的函式庫來進行清理,這將會很有用。
offset
array | string | function
[0, 0]
Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: data-bs-offset="10,20"
When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding, distance].
For more information refer to Popper's offset docs.
popperConfig
null | object | function
To change Bootstrap's default Popper config, see Popper's configuration.
When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.
Using function with popperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
See our JavaScript documentation for more information.
顯示一個元素的工具提示。 在工具提示實際顯示之前返回給調用者(即在 shown.bs.tooltip 事件發生之前)。這被認為是 “手動” 觸發工具提示。標題零長度的工具提示將不會顯示。
tooltip.show()
隱藏一個元素的工具提示。在工具提示實際上被隱藏之前返回給調用者(即在 hidden.bs.tooltip 事件發生之前)。這被認為是 “手動” 觸發工具提示。
tooltip.hide()
切換一個元素的工具提示。 在工具提示實際顯示或隱藏之前返回給調用者(即,在 shown.bs.tooltip 或 hidden.bs.tooltip 事件發生之前)。這被認為是 “手動” 觸發工具提示框。
tooltip.toggle()
隱藏和破壞一個元素的工具提示。(移除 DOM 元素上儲存的資料)。使用 delegation (由 selector 選項 創建) 的工具提示不能在後代觸發元素上單獨被銷毀。
tooltip.dispose()
給一個元素的工具提示顯示的功能。預設情況下啟用工具提示。
tooltip.enable()
刪除一個元素其工具提示的顯示功能。只有在重新啟用後,才能顯示工具提示框。
tooltip.disable()
切換一個元素之工具提示的顯示或隱藏功能。
tooltip.toggleEnabled()
更新一個元素之工具提示的定位。
getInstance
允許您獲取與 DOM 元素關聯之工具提示實例的 靜態方法。
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Event type
Description