?
This document uses PHP Chinese website manual Release
使用CSS和JavaScript添加自定義引導(dǎo)工具提示的文檔和示例，使用CSS 3進(jìn)行動畫和本地標(biāo)題存儲的數(shù)據(jù)屬性。
概述
使用工具提示插件時要知道的事情：
工具提示依賴于第三派對庫Popper.js用于定位。你必須包括popper.min.js在引導(dǎo).js或使用
bootstrap.bundle.min.js/bootstrap.bundle.js其中包含Popper.js，以便工具提示能夠工作%21。
如果從源頭構(gòu)建我們的JS，要求
util.js...
由于性能原因，工具提示可以選擇，因此你必須自己初始化...
沒有顯示零長度標(biāo)題的工具提示。
指定
container: 'body'為了避免在更復(fù)雜的組件(如我們的輸入組、按鈕組等)中呈現(xiàn)問題，%29。
觸發(fā)隱藏元素的工具提示將無法工作。
工具提示
.disabled或disabled元素必須在包裝器元素上觸發(fā)。
當(dāng)從跨越多行的超鏈接觸發(fā)時，工具提示將居中。使用
white-space: nowrap;你的<a>為了避免這種行為。
在從DOM中刪除相應(yīng)的元素之前，必須隱藏工具提示。
都明白了嗎？太好了，讓我們看看他們是如何用一些例子來工作的。
示例：隨時隨地啟用工具提示
初始化頁面上所有工具提示的一種方法是通過data-toggle屬性：
$(function () { $('[data-toggle="tooltip"]').tooltip()})實(shí)例
在下面的鏈接上懸停以查看工具提示：
靜態(tài)演示
有四個選項(xiàng)可用：上、右、底和左對齊。
交互式演示
懸停在下面的按鈕上，查看它們的工具提示。
<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>
使用
工具提示插件按需生成內(nèi)容和標(biāo)記，默認(rèn)情況下將工具提示放在觸發(fā)器元素之后。
通過JavaScript觸發(fā)工具提示：
$('#example').tooltip(options)標(biāo)記
工具提示所需的標(biāo)記僅為data屬性和title在HTML元素上，您希望有一個工具提示。生成的工具提示標(biāo)記相當(dāng)簡單，盡管它在默認(rèn)情況下需要位置%28，設(shè)置為top插件%29。
使工具提示對鍵盤和輔助技術(shù)用戶有效
您應(yīng)該只向傳統(tǒng)上具有鍵盤焦點(diǎn)和交互式%28的HTML元素添加工具提示，例如鏈接或表單控件%29。盡管任意HTML元素%28，例如<span>S%29可以通過添加tabindex="0"屬性，這將為鍵盤用戶在非交互元素上添加潛在的煩人和令人困惑的制表符。此外，大多數(shù)輔助技術(shù)目前在這種情況下不公布工具提示。
<!-- 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>
備選方案
選項(xiàng)可以通過數(shù)據(jù)屬性或JavaScript傳遞。對于數(shù)據(jù)屬性，將選項(xiàng)名追加到data-，如data-animation=""...
Name | Type | Default | Description |
|---|---|---|---|
animation | boolean | true | Apply a CSS fade transition to the tooltip |
container | string | element | false | false | Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
delay | number | object | 0 | Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: delay: { "show": 500, "hide": 100 } |
html | boolean | false | Allow HTML in the tooltip. If true, HTML tags in the tooltip's title will be rendered in the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
placement | string | function | 'top' | How to position the tooltip - auto | top | bottom | left | right.When auto is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance. |
selector | string | false | false | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. |
template | string | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' | Base HTML to use when creating the tooltip. The tooltip's title will be injected into the .tooltip-inner. .arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class. |
title | string | element | function | '' | Default title value if title attribute isn't present. If a function is given, it will be called with its this reference set to the element that the tooltip is attached to. |
trigger | string | 'hover focus' | How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. |
offset | number | string | 0 | Offset of the tooltip relative to its target. For more information refer to Popper.js's offset docs. |
fallbackPlacement | string | array | 'flip' | Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs |
個別工具提示的數(shù)據(jù)屬性
可以通過使用數(shù)據(jù)屬性來指定單個工具提示的選項(xiàng)，如上文所述。
方法
異步方法和轉(zhuǎn)換
所有API方法都是異步然后開始過渡.他們會在過渡開始后立即返回給呼叫者，但是在它結(jié)束之前此外，方法調(diào)用轉(zhuǎn)換組件將被忽略。...
有關(guān)更多信息，請參閱我們的JavaScript文檔。
$().tooltip(options)
將工具提示處理程序附加到元素集合。
.tooltip('show')
顯示元素的工具提示。在實(shí)際顯示工具提示之前返回給調(diào)用方。%28i.e.。在shown.bs.tooltip事件發(fā)生%29。這被認(rèn)為是工具提示的“手動”觸發(fā)。沒有顯示零長度標(biāo)題的工具提示。
$('#element').tooltip('show').tooltip('hide')
隱藏元素的工具提示。在工具提示實(shí)際隱藏之前返回給調(diào)用方。%28i.e.。在hidden.bs.tooltip事件發(fā)生%29。這被認(rèn)為是工具提示的“手動”觸發(fā)。
$('#element').tooltip('hide').tooltip('toggle')
切換元素的工具提示。在工具提示實(shí)際顯示或隱藏之前返回給調(diào)用方。%28i.e.。在shown.bs.tooltip或hidden.bs.tooltip事件發(fā)生%29。這被認(rèn)為是工具提示的“手動”觸發(fā)。
$('#element').tooltip('toggle').tooltip('dispose')
隱藏并銷毀元素的工具提示。使用委托%28創(chuàng)建的工具提示大selector期權(quán)%29不能在子代觸發(fā)器元素上單獨(dú)銷毀。
$('#element').tooltip('dispose').tooltip('enable')
使元素的工具提示具有顯示的能力。默認(rèn)情況下，工具提示是啟用的。
$('#element').tooltip('enable').tooltip('disable')
移除顯示元素的工具提示的能力。工具提示只有在重新啟用時才能顯示.
$('#element').tooltip('disable').tooltip('toggleEnabled')
切換元素的工具提示顯示或隱藏的能力。
$('#element').tooltip('toggleEnabled').tooltip('update')
更新元素的工具提示的位置。
$('#element').tooltip('update')事件
Event Type | Description |
|---|---|
show.bs.tooltip | This event fires immediately when the show instance method is called. |
shown.bs.tooltip | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.tooltip | This event is fired immediately when the hide instance method has been called. |
hidden.bs.tooltip | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
inserted.bs.tooltip | This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () { // do something…})? 2011–2017 Twitter, Inc.
?2011-2017自帶作者
根據(jù)麻省理工學(xué)院的許可授權(quán)的代碼。
根據(jù)CreativeCommonsAttributionLicense v3.0授權(quán)的文檔。