工具提示

文档和示例使用 CSS3 添加自定义 Bootstrap 工具提示和 JavaScript 用于动画和数据属性用于本地标题存储。

概述

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

• 工具提示依赖 3rd 方库Popper进行定位。您必须在 bootstrap.js 之前包含popper.min.js或使用包含 Popper 的bootstrap.bundle.min.js/以使工具提示起作用！bootstrap.bundle.js
• 如果您从源代码构建我们的 JavaScript，它需要util.js.
• 出于性能原因，工具提示是可选的，因此您必须自己初始化它们。
• 从不显示具有零长度标题的工具提示。
• 指定container: 'body'以避免在更复杂的组件（如我们的输入组、按钮组等）中出现渲染问题。
• 在隐藏元素上触发工具提示将不起作用。
• .disabled或元素的工具提示disabled必须在包装元素上触发。
• 当从跨越多行的超链接触发时，工具提示将居中。white-space: nowrap;在你的 s 上使用<a>以避免这种行为。
• 在从 DOM 中删除相应元素之前，必须隐藏工具提示。
• 由于影子 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)

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

标记

工具提示所需的标记只是一个data属性，并且title在您希望拥有工具提示的 HTML 元素上。生成的工具提示标记相当简单，尽管它确实需要一个位置（默认情况下，top由插件设置）。

<!-- 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="".

方法

$().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')

活动

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