提示工具 | Tooltips

使用CSS和JavaScript添加自定义引导工具提示的文档和示例，使用CSS 3进行动画和本地标题存储的数据属性。

概述

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

工具提示依赖于第三派对库Popper.js用于定位。你必须包括popper.min.js在引导.js或使用bootstrap.bundle.min.js/bootstrap.bundle.js其中包含Popper.js，以便工具提示能够工作%21。

如果从源头构建我们的JS，要求util.js...

由于性能原因，工具提示可以选择，因此你必须自己初始化...

没有显示零长度标题的工具提示。

指定container: 'body'为了避免在更复杂的组件(如我们的输入组、按钮组等)中呈现问题，%29。

触发隐藏元素的工具提示将无法工作。

工具提示.disabled或disabled元素必须在包装器元素上触发。

当从跨越多行的超链接触发时，工具提示将居中。使用white-space: nowrap;你的<a>为了避免这种行为。

在从DOM中删除相应的元素之前，必须隐藏工具提示。

都明白了吗？太好了，让我们看看他们是如何用一些例子来工作的。

示例：随时随地启用工具提示

初始化页面上所有工具提示的一种方法是通过data-toggle属性：

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

实例

在下面的链接上悬停以查看工具提示：

打开 getbootstrap.com 上的示例

静态演示

有四个选项可用：上、右、底和左对齐。

打开 getbootstrap.com 上的示例

交互式演示

悬停在下面的按钮上，查看它们的工具提示。

打开 getbootstrap.com 上的示例

<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元素上，您希望有一个工具提示。生成的工具提示标记相当简单，尽管它在默认情况下需要位置%28，设置为top插件%29。

使工具提示对键盘和辅助技术用户有效

您应该只向传统上具有键盘焦点和交互式%28的HTML元素添加工具提示，例如链接或表单控件%29。尽管任意HTML元素%28，例如<span>S%29可以通过添加tabindex="0"属性，这将为键盘用户在非交互元素上添加潜在的烦人和令人困惑的制表符。此外，大多数辅助技术目前在这种情况下不公布工具提示。

<!-- 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>

备选方案

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名追加到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. `manual` cannot be combined with any other trigger.
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

个别工具提示的数据属性

可以通过使用数据属性来指定单个工具提示的选项，如上文所述。

方法

异步方法和转换

所有API方法都是异步然后开始过渡.他们会在过渡开始后立即返回给呼叫者，但是在它结束之前此外，方法调用转换组件将被忽略。...

有关更多信息，请参阅我们的JavaScript文档。

`$().tooltip(options)`

将工具提示处理程序附加到元素集合。

`.tooltip('show')`

显示元素的工具提示。在实际显示工具提示之前返回给调用方。%28i.e.。在shown.bs.tooltip事件发生%29。这被认为是工具提示的“手动”触发。没有显示零长度标题的工具提示。

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

`.tooltip('hide')`

隐藏元素的工具提示。在工具提示实际隐藏之前返回给调用方。%28i.e.。在hidden.bs.tooltip事件发生%29。这被认为是工具提示的“手动”触发。

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

`.tooltip('toggle')`

切换元素的工具提示。在工具提示实际显示或隐藏之前返回给调用方。%28i.e.。在shown.bs.tooltip或hidden.bs.tooltip事件发生%29。这被认为是工具提示的“手动”触发。

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

`.tooltip('dispose')`

隐藏并销毁元素的工具提示。使用委托%28创建的工具提示大selector期权%29不能在子代触发器元素上单独销毁。

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

`.tooltip('enable')`

使元素的工具提示具有显示的能力。默认情况下，工具提示是启用的。

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

根据麻省理工学院的许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。

https：//getbootstrap.com/docs/4.0/Components/ToolTIPS/

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-09-28