事件

下表列出了提示工具（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 实例方法时立即触发该事件。 
$('#myTooltip').on('hide.bs.tooltip', function () {

  // 执行一些动作...

})
hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 
$('#myTooltip').on('hidden.bs.tooltip', function () {

  // 执行一些动作...

})

实例

下面的实例演示了提示工具（Tooltip）插件事件的用法。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 提示工具(Tooltip)插件的事件</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:30px">
这是一个<a href="#"data-toggle="tooltip" class="tooltip-show" data-placement="bottom" title="Tooltip方法show">Tooltip方法show</a>
</div>
<script>
$(document).ready(function () {
$("a[data-toggle='tooltip']").tooltip("show");
$("a[data-toggle='tooltip']").on("show.bs.tooltip", function () {
alert("alert message on show")
})

})
</script>
</body>
</html>

Bootstrap 提示工具(Tooltip)插件的事件的更多相关文章

  1. Bootstrap 提示工具(Tooltip)插件方法的用法

    方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...

  2. Bootstrap 提示工具(Tooltip)插件

    当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...

  3. Bootstrap 提示工具（Tooltip）插件

    一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...

  4. CSS 提示工具(Tooltip)

    CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: 1.基础提示工具代码如下: <!doctye ht ...

  5. CSS：CSS 提示工具(Tooltip)

    ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...

  6. Bootstrap-Plugin：提示工具（Tooltip）插件

    ylbtech-Bootstrap-Plugin:提示工具(Tooltip)插件 1.返回顶部 1. Bootstrap 提示工具(Tooltip)插件 当您想要描述一个链接的时候,提示工具(Tool ...

  7. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

  8. BootStrap之 提示工具（Tooltip）插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

随机推荐

  1. docker常用到的一些命令

    docker ps 1. docker ps -a(显示所有的容器,包括未运行的) 2.docker ps -q (只显示ip) 3. docker ps -f(根据条件过滤显示的内容) docker ...

  2. express-http-proxy 的基础使用

    const app = express() app.use(matchPath, proxy(serverAddress, { proxyReqPathResolver: function(req) ...

  3. 小K的农场 差分约束

    题目描述 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得一些含糊的信息(共m个),以下列三种形式描述: 农场a比农场b至少多种植了c个单位的作 ...

  4. (转)Web服务器磁盘满故障深入解析

    Web服务器磁盘满故障深入解析 原文:http://blog.51cto.com/oldboy/612351 ############################################# ...

  5. sed 处理一行，替换 删除

    sed option 'action' filename (文件可多个) option: -i 直接在原文件中修改! -n 安静模式,默认情况所有数据都会被列出,但-n只有经过动作处理的那一行才被列出 ...

  6. 现代java开发指南系列

    [翻译]现代java开发指南系列 [翻译]现代java开发指南 第一部分 [翻译]现代java开发指南 第二部分 [翻译]现代java开发指南 第三部分

  7. GitHub上易于高效开发的Android开源项目TOP20--适合新手

    1. android-async-http android-async-http是Android上的一个异步.基于回调的HTTP客户端开发包,建立在Apache的HttpClient库上. 2. an ...

  8. sublime 常用快捷键(转)

    Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键 ...

  9. 使用Python开发环境Wing IDE设立项目注意事项

    使用Wing IDE的第一步是建立一个项目文件,这样Wing IDE就可以找到并分析源代码,存储工作. Wing IDE会自动以默认的项目进行启动.在本教程中用户也可以使用这个默认项目进行示例操作.如 ...

  10. 编程中的多字节和Unicode

    在编译许多程序的时候,我们常常会出现诸如指针转换错误或者const char[] 不能转换成XX的错误,这时很可能就是项目编码的问题了,如果您使用的是VS编程环境,那么打开工程属性,里面就有个选项是给 ...