一般工具提示

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.

不同方向的提示

使用提醒

用法

通过JavaScript激活工具提示:

鼠标悬停显示提示消息
<a href="your/nice/url" data-toggle="tooltip" title="这是提示消息内容">鼠标悬停显示提示消息</a>
$('[toggle="tooltip"]').tooltip(options);

选项

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

名称 类型 默认值 描述
animation boolean true 决定是否应用淡入淡出动画。
html boolean false 是否允许展示html标签。
placement string | function 'top' top | bottom | left | right | auto.
显示的位置。
selector string false 当需要为动态DOM应用工具提示,需要手动指定选择器。
title string | function '' 标题。
trigger string 'hover focus' click | hover | focus | manual. 触发方式。
delay number | object 0

如果指定,则应用延迟。

delay: { show: 500, hide: 100 }

container string | false false

决定相对位置的父级容器。 container: 'body'

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

标记

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

方法

$().tooltip(options)

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

.tooltip('show')

展示工具提示。

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

.tooltip('hide')

隐藏工具提示。

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

.tooltip('toggle')

展示或隐藏工具提示。

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

.tooltip('destroy')

隐藏并销毁工具提示。

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

事件

事件类型 描述
show.zui.tooltip show 方法被调用之后,此事件将被立即触发。
shown.zui.tooltip 当工具提示展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。
hide.zui.tooltip hide 方法被调用之后,此事件被触发。
hidden.zui.tooltip 当工具提示被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。