事件

下表列出了提示工具（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. CF446B DZY Loves Modification 优先队列

    As we know, DZY loves playing games. One day DZY decided to play with a n × m matrix. To be more pre ...

  2. CPU死锁

    https://blog.csdn.net/sunny05296/article/details/82858071 最近碰到了Centos7.2上终端打印soft lockup CPU死锁,系统无响应 ...

  3. GPT分区

    GUID分区表(简称GPT.使用GUID分区表的磁盘称为GPT磁盘).它具有如下优点: 1.支持2TB以上的硬盘.    2.分区个数没有限制.但是Windows系统最多支持128个分区.    3. ...

  4. 关于VS2017提示I/O文件操作函数需要加上_s的解决办法

    最近不论是在写网络编程还是在写小项目时候,都会提示让我用加个_s的函数........ 其实加上_s这个函数是为了确保函数的安全性,确保不会有内存不够或者溢出的情况.但是每次都需要重新看一下_s函数的 ...

  5. ubuntu设置nginx为系统服务

    ubuntu设置nginx为系统服务,如果没有设置为系统服务,无法执行 sudo service nginx startsudo service nginx stop 设置为系统服务命令 sudo u ...

  6. 默认约束 default

    default :初始值设置,插入记录时,如果没有明确为字段赋值,则自动赋予默认值.  例子:create table tb6(   id int primary key auto_increment ...

  7. Python+Selenium----使用HTMLTestRunner.py生成自动化测试报告1（使用IDLE）

    1.说明 自动化测试报告是一个很重要的测试数据,网上看了一下,使用HTMLTestRunner.py生成自动化测试报告使用的比较多,但是呢,小白刚刚入手,不太懂,看了很多博客,终于生成了一个测试报告, ...

  8. 三，JVM 自带命令行工具之JMap

    jmap:java内存映像工具 jmap(Memory Map for java ) 命令用于生成堆转储快照(一般被称为headdump 或dump文件) jmap命令格式:jmap [option ...

  9. 【Java】Java与数字证书

    Java与数字证书 Java与数字证书 证书的签发和应用 证书的内容和意义 其它 证书(Certificate,也称public-key certificate)是用某种签名算法对某些内容(比如公钥) ...

  10. 性能测试学习第五天_loadrunner概述

    1.为什么要进行性能测试(性能测试贯穿于软件生命周期) The failure of a mission-critical application can be costly. Assure perf ...