Bootstrap 提示工具(Tooltip)插件

2020-06-18 06:00:05易采站长站整理

方法

下面是一些提示工具(Tooltip)插件中有用的方法:

方法描述实例
Options: .tooltip(options)向元素集合附加提示工具句柄。
$().tooltip(options)
Toggle: .tooltip('toggle')切换显示/隐藏元素的提示工具。
$('#element').tooltip('toggle')
Show: .tooltip('show')显示元素的提示工具。
$('#element').tooltip('show')
Hide: .tooltip('hide')隐藏元素的提示工具。
$('#element').tooltip('hide')
Destroy: .tooltip('destroy')隐藏并销毁元素的提示工具。
$('#element').tooltip('destroy')

实例

下面的实例演示了提示工具(Tooltip)插件方法的用法。

实例

这是一个 Tooltip 方法 show
.

这是一个 Tooltip 方法 hide
.

这是一个 Tooltip 方法 destroy
.

这是一个 Tooltip 方法 toggle
.

这是一个 <a href="#" data-toggle="tooltip" title="

'am Header2

">Tooltip 方法 options
.


$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });
});

结果如下所示:

提示工具(Tooltip)插件方法

事件

下表列出了提示工具(Tooltip)插件中要用到的事件。这些事件可在函数中当钩子使用。

相关文章 大家在看
事件描述实例
show.bs.tooltip当调用 show 实例方法时立即触发该事件。
$('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...
})
shown.bs.tooltip当提示工具对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
$('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...
})
hide.bs.tooltip当调用 hide 实例方法时立即触发该事件。