事件

下表列出了提示工具（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. Java基础笔记（十三）——面向对象

    类和对象 类是具有相同属性和方法的一组对象的集合,好比一个虚拟的轮廓(抽象的概念),确定对象将会拥有的特征(属性)和行为(方法). 对象是类的实例表现,是一个具体的东西(一个看得到.摸得着的具体实体) ...

  2. 《SQL 进阶教程》 自连接分组排序:练习题1-2-2

    分组排序 SELECT d1.district, d1. NAME, (SELECT COUNT(d2.price) FROM district_products d2 WHERE d2.price ...

  3. unique key 唯一约束

    #添加唯一约束mysql> alter table tb2    -> add unique key(name)   ->;#删除唯一约束mysql> alter table ...

  4. A. The Fair Nut and Elevator（暴力）

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  5. mysql存储过程详解实例

    mysql存储过程详解 1.      存储过程简介 我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的SQL ...

  6. Android 中文 API (101) —— AsyncTask

    一.结构 public abstract class AsyncTask extends Object java.lang.Object android.os.AsyncTask<Params, ...

  7. 【踩坑】服务器部署springboot应用时报错--端口被tomcat占用

    今天将本机尬聊一下项目(基于netty-socketio)的服务端程序调试好以后,通过jar包部署在服务器的时候,出现了报错,提示tomcat已经占用了端口. 之前在部署iReview项目时的确是通过 ...

  8. JVM（一）：Java内存区域与内存溢出异常

    一.运行时数据区 共分为5块: 程序计数器      (线程私有,当前线程所执行的字节码的行号指示器) Java虚拟机栈  (线程私有,证明周期与线程相同,描述的是Java方法执行的内存模型,每个方法 ...

  9. laydate 显示结束时间不小于开始时间

    jsp: <div class="form-group">    <label >交易时间:</label>        <input ...

  10. String对象中常用的方法有哪些？

    1.length()字符串长度 String str="abc"; System.out.println(str.length()); //输出3 2.charAt()截取一个字符 ...