Tooltips

类型

一般工具提示

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, cupiditate, eius, modi, veniam iure perspiciatis hic vitae quisquam ullam animi ipsum repellat temporibus have a officiis voluptatibus nostrum laborum debitis quidem illo deleniti iste! Minima, facilis aut explicabo debitis fugit dolor sint at soluta nulla omnis itaque have a illum commodi numquam enim quod architecto molestias qui eveniet et amet have a laborum quisquam quam provident esse beatae quas impedit voluptas nostrum have a aspernatur deleniti suscipit blanditiis dignissimos temporibus eligendi quae corrupti have a pariatur quo! Enim, ipsa, odio quasi laboriosam provident id nihil maxime architecto dolorum quas harum veniam perspiciatis tempora ducimus qui! Rem, obcaecati reiciendis officia quam.

参数

不同方向的提示

注意

选择性加入的功能

出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须自己初始化他们。

工具提示与按钮组和输入框组联合使用时需要一些特殊设置

在.btn-group 或 .input-group内的元素上使用工具提示时，你需要指定container: 'body'选项以避免不需要的副作用（例如，当工具提示显示之后，与其合作的页面元素可能变得更宽或是去圆角）。

在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来

为了给disabled 或.disabled元素添加工具提示，将需要增加工具提示的页面元素包裹在一个<div>中，然后对这个<div>元素应用工具提示。

用法

通过JavaScript激活工具提示：

$('#example').tooltip(options)

Markup

The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

<div class="tooltip">
          <div class="tooltip-inner">
            Tooltip!
          </div>
          <div class="tooltip-arrow"></div>
        </div>

选项

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-animation=""。

名称 类型 默认值 描述
animation boolean true apply a CSS fade transition to the tooltip
html boolean false Insert HTML into 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 - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function '' default title value if title attribute isn't present
trigger string 'hover focus' how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
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 }
container string | false false

Appends the tooltip to a specific element. Example: container: 'body'

对单个工具提示使用data属性

使用data属性可以为单个工具提示指定额外选项，如下所示。

标记

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

方法

$().tooltip(options)

为一组元素应用工具提示。

.tooltip('show')

展示工具提示。

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

.tooltip('hide')

隐藏工具提示。

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

.tooltip('toggle')

展示或隐藏工具提示。

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

.tooltip('destroy')

隐藏并销毁工具提示。

js$('#element').tooltip('destroy')

事件

事件类型 描述
show.bs.tooltip 当show方法被调用之后，此事件将被立即触发。
shown.bs.tooltip 当工具提示展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。
hide.bs.tooltip 当hide方法被调用之后，此事件被触发。
hidden.bs.tooltip 当工具提示被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。 
$('#myTooltip').on('hidden.bs.tooltip', function () {
      // do something…
    })