Source

工具提示

文档和示例使用 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 中删除相应元素之前，必须隐藏工具提示。
由于影子 DOM 中的元素，可以触发工具提示。

该组件的动画效果依赖于prefers-reduced-motion媒体查询。请参阅我们可访问性文档的减少运动部分。

明白了吗？太好了，让我们通过一些示例来看看它们是如何工作的。

示例：随处启用工具提示

初始化页面上所有工具提示的一种方法是通过它们的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)

溢出`auto`和`scroll`

overflow: auto当父容器有或overflow: scroll喜欢我们的时，工具提示位置会尝试自动更改.table-responsive，但仍保持原始位置的定位。要解决此问题，请将boundary选项设置为默认值以外的任何值'scrollParent'，例如'window'：

$('#example').tooltip({ boundary: 'window' })

标记

工具提示所需的标记只是一个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`上下文设置为工具提示实例。
选择器	字符串 \| 错误的	错误的	如果提供了选择器，则工具提示对象将被委托给指定的目标。在实践中，这也用于将工具提示应用于动态添加的 DOM 元素（`jQuery.on`支持）。请参阅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…
})

工具提示

概述

示例：随处启用工具提示

例子

用法

溢出auto和scroll

标记

使工具提示适用于键盘和辅助技术用户

禁用元素

选项

单个工具提示的数据属性

方法

异步方法和转换

$().tooltip(options)

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

.tooltip('dispose')

.tooltip('enable')

.tooltip('disable')

.tooltip('toggleEnabled')

.tooltip('update')

活动