事件

下表列出了提示工具（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. C.0689-The 2019 ICPC China Shaanxi Provincial Programming Contest

    We call a string as a 0689-string if this string only consists of digits '0', '6', '8' and '9'. Give ...

  2. 关于递归函数返回值为null的问题

    public function gettopcateid($cate_id){ $pid=db('cate')->where('cate_id',$cate_id)->find(); if ...

  3. css3中的变形（transform）、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  4. 网络安全基础之arp

    ARP(Address Resolution Protocol),中文解释为地址解析协议,是根据IP地址获取物理地址的一个TCP/IP协议. ARP大致工作流程如下: 主机发送信息时将包含目标IP地址 ...

  5. 小小粉丝度度熊 二分答案　＋ two pointer

    http://acm.hdu.edu.cn/showproblem.php?pid=6119 发现自己的two pointer能力超弱. 这题是合并时间后,二分答案. 可以知道对于每个时间区间,合法的 ...

  6. nginx 添加https支持

    自行颁发不受浏览器信任的SSL证书为晒晒IQ网颁发证书.ssh登陆到服务器上,终端输入以下命令,使用openssl生成RSA密钥及证书. # 生成一个RSA密钥 $ openssl genrsa -d ...

  7. linux php 安装xdebug

    我的环境是PHP 5.2.5,下载的xdebug是Xdebug v2.2.1 源码包 PHP 5.3.20用的是Xdebug v2.1.0  {版本一定要匹配} 下载地址为:http://xdebug ...

  8. Htpp通讯协议详解

    转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的 ...

  9. C#数字图像处理算法学习笔记（一）--C#图像处理的3中方法

    C#数字图像处理算法学习笔记(一)--C#图像处理的3中方法 Bitmap类:此类封装了GDI+中的一个位图,次位图有图形图像及其属性的像素数据组成.因此此类是用于处理像素数据定义的图形的对象.该类的 ...

  10. #include stdio.h(1)

    #include <stdio.h> int main() { //************一.运算符********** //1.赋值运算符 = ; //赋值运算符表示的是将等号右边的赋 ...