当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。
使用提示框插件时应了解的事情如下:
bootstrap.bundle.min.js
/ bootstrap.bundle.js
,这已经包含 Popper.js 可以直接运作。container: 'body'
以避免在更复杂的元件(如我们的输入群组,按钮组等)中出现问题。.disabled
或 disabled
元素提示框的触发必须在外层元素上。white-space: nowrap;
上使用 <a>
来避免这种行为都明白了?太好了,让我们通过一些例子看他们是如何运作的。
在页面上初始化所有提示框的一种方法是通过它们的 data-toggle
属性来选择它们:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
滑动 hover 到链接上查看提示框
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
将鼠标悬停在下方按钮上可查看四个提示框方向:顶部,右侧,底部和左侧.
<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>
提示框插件会根据需要生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。
通过JavaScript触发提示框:
$('#example').tooltip(options)
auto
and scroll
Tooltip position attempts to automatically change when a parent container has overflow: auto
or overflow: scroll
like our .table-responsive
, but still keeps the original placement’s positioning. To resolve, set the boundary
option to anything other than default value, 'scrollParent'
, such as 'window'
:
$('#example').tooltip({ boundary: 'window' })
提示框所需的标记只是一个 data
属性和 title
在你希望获得提示框的HTML元素上。 生成的提示框标记相当简单,但它确实需要一个位置 (默认情况下,设置为 top
通过插件)。
你只应为传统上键盘 focus 和互动式(如链接或表单控制元件)的 HTML 元素添加提示框。虽然任意的 HTML 元素(如 <span>
)可以通过添加 tabindex="0"
属性来调整 focus ,但这会为键盘使用者的非互动式元素增加可能造成困惑的定位点。此外,大多数辅助技术目前还没有加入这种情况下的提示框。
此外,不要单纯依赖 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
的元素是不能产生互动的,这意味用户不能使用 hover 及点击触发弹出(或提示框),如果想要启用,可使用 <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>
可以通过data属性或 JavaScript 传递选项。对于data属性,将选项名称附加到 data-
, as in data-animation=""
.
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | 将CSS淡入淡出过渡应用于提示框 |
container | string | element | false | false |
将提示框附加到特定元素。 例: |
delay | number | object | 0 |
显示和隐藏弹出提示框的延迟(ms) - 不适用于手动触发类型 如果提供了一个数字,则将延迟应用于隐藏/显示 对象结构是: |
html | boolean | false |
在提示框中允许 HTML。 如果为 true,提示框的 如果你担心XSS攻击,请使用文本。 |
placement | string | function | 'top' |
如何定位提示框 - auto | top | bottom | left | right。 当函数用于确定位置时,将使用提示框 DOM 节点作为其第一个参数并将触发元素 DOM 节点作为其第二个参数来调用。 |
selector | string | false | false | 如果提供了选择器,提示框将被委派给指定的目标。实际上,这用于动态 HTML 来扩增提示框事件。 |
template | string | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
创建提示框时使用的基本 HTML 提示框的
最外层的包装元素应该有 |
title | string | element | function | '' |
如果 如果给出一个函数,它将被调用,其 |
trigger | string | 'hover focus' |
如何触发提示框 - 单击| 悬停| 焦点| 手册。 你可以传递多个触发器; 用空格隔开它们。
|
offset | number | string | 0 | 提示框相对于其目标的偏移量。 有关更多信息,请参阅Popper.js的偏移文档 |
fallbackPlacement | string | array | 'flip' | 允许指定Popper将在后备中使用的位置。 有关更多信息,请参阅Popper.js的行为文档 |
boundary | string | element | 'scrollParent' | Overflow constraint boundary of the tooltip. Accepts the values of 'viewport' , 'window' , 'scrollParent' , or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs. |
如上所述,可以通过使用数据属性来指定单个提示框的选项。
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.
$().tooltip(options)
将提示框处理程序附加到元素集合。
.tooltip('show')
显示元素的提示框. 在实际显示提示框之前返回调用者 (即在 shown.bs.tooltip
之前)。 这被认为是提示框的“手动”触发。 永远不会显示具有零长度标题的提示框。
$('#element').tooltip('show')
.tooltip('hide')
隐藏元素的提示框。 在实际隐藏提示框之前返回调用者 (即在 hidden.bs.tooltip
之前)。 这被认为是提示框的“手动”触发。
$('#element').tooltip('hide')
.tooltip('toggle')
切换元素的提示框。 在实际显示或隐藏提示框之前返回调用者 (即在 shown.bs.tooltip
或 hidden.bs.tooltip
之前)。这被认为是提示框的“手动”触发。
$('#element').tooltip('toggle')
.tooltip('dispose')
隐藏和销毁元素的提示框。 使用委托的提示框(使用 the selector
option) 不能在后代触发元素上单独销毁。
$('#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 实例方法时,此事件会立即触发。 |
shown.bs.tooltip | 当提示框显示后,会触发此事件(待CSS转换完成)。 |
hide.bs.tooltip | 当调用 hide 实例方法时,会立即触发此事件。 |
hidden.bs.tooltip | 当提示框对隐藏后,会触发此事件(待CSS转换完成)。. |
inserted.bs.tooltip | 将提示框范本加到 DOM 后,会在 show.bs.tooltip 事件后触发此事件。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})