提示框

当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。

概览

使用提示框插件时应了解的事情如下:

都明白了?太好了,让我们通过一些例子看他们是如何运作的。

实例:在任何地方添加提示框

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

将提示框附加到特定元素。 例:container: 'body'。此选项特别有用,它允许你将提示框放置在触发元素附近的文档流中 - 这将防止提示框在窗口大小调整期间从触发元素浮动。

delay number | object 0

显示和隐藏弹出提示框的延迟(ms) - 不适用于手动触发类型

如果提供了一个数字,则将延迟应用于隐藏/显示

对象结构是: delay: { "show": 500, "hide": 100 }

html boolean false

在提示框中允许 HTML。

如果为 true,提示框的 title 中的 HTML 标签将在提示框中呈现。如果为 false,则将使用 jQuery的 text 方法将内容插入到 DOM 中。如果你担心 XSS 攻击,请使用文字。

如果你担心XSS攻击,请使用文本。

placement string | function 'top'

如何定位提示框 - auto | top | bottom | left | right。
When auto 时,将动态重新定位提示框。

当函数用于确定位置时,将使用提示框 DOM 节点作为其第一个参数并将触发元素 DOM 节点作为其第二个参数来调用。 this 将被设为弹出提示框实例

selector string | false false 如果提供了选择器,提示框将被委派给指定的目标。实际上,这用于动态 HTML 来扩增提示框事件。
template string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

创建提示框时使用的基本 HTML

提示框的 title 将被注入到 .tooltip-inner中。

.arrow 将成为提示框的箭头。

最外层的包装元素应该有 .tooltiprole="tooltip".

title string | element | function ''

如果 title属性不存在,则为默认标题值。

如果给出一个函数,它将被调用,其 this 引用设置为提示框附加到的元素

trigger string 'hover focus'

如何触发提示框 - 单击| 悬停| 焦点| 手册。 你可以传递多个触发器; 用空格隔开它们。

'manual' 表示提示框将通过 .tooltip('show'), .tooltip('hide').tooltip('toggle') 的方法触发,这个值不能与其它的触发器做组合。

'hover' 将导致键盘无法触发提示框,只能做为使用键盘用户传递讯息的替代方法。

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.

各个提示框的数据属性

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

方法

Asynchronous methods and transitions

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.tooltiphidden.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…
})