一、提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。

有以下两种方式添加提示工具（tooltip）：

1、通过data属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

  1. <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

2、通过 JavaScript 触发提示工具（tooltip）：

  1. $('#identifier').tooltip(options)

二、基本的提示工具（Tooltip）示例：

html与js代码

  1. <h4>提示工具（Tooltip）插件 - 锚</h4>
  2. 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"title="默认的 Tooltip"> 默认的 Tooltip</a>
  3. <br />
  4. <h4>提示工具（Tooltip）插件 - 按钮</h4>
  5. <button type="button" class="btn btn-default" data-toggle="tooltip"title="默认的 Tooltip">默认的 Tooltip</button>
  1. <script>
  2. $(function() {
  3. $("[data-toggle='tooltip']").tooltip();
  4. });
  5. </script>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 提示工具（Tooltip）插件</title>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" href="css/bootstrap.min.css">
  7. <script src="js/jquery.min.js"></script>
  8. <script src="js/bootstrap.min.js"></script>
  9. </head>
  10. <body>
  11. <div class="container">
  12. <h4>提示工具（Tooltip）插件 - 锚</h4>
  13. 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"title="默认的 Tooltip"> 默认的 Tooltip</a>
  14. <br />
  15. <h4>提示工具（Tooltip）插件 - 按钮</h4>
  16. <button type="button" class="btn btn-default" data-toggle="tooltip"title="默认的 Tooltip">默认的 Tooltip</button>
  17. <script>
  18. $(function() {
  19. $("[data-toggle='tooltip']").tooltip();
  20. });
  21. </script>
  22. </div>
  23. </body>
  24. </html>

效果图

三、

下面是一些提示工具（Tooltip）插件中有用的方法：

html代码

  1. 这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"title="show">Tooltip 方法 show </a>.
  2. 这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"data-placement="left" title="hide">Tooltip 方法 hide </a>.
  3. 这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"data-placement="top" title="destroy">Tooltip 方法 destroy </a>.
  4. 这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"data-placement="bottom" title="toggle">Tooltip 方法 toggle </a>.
  5. <p class="tooltip-options">这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">Tooltip 方法 options </a>.</p>

js代码

  1. <script>
  2. $(function () { $('.tooltip-show').tooltip('show');});
  3. $(function () { $('.tooltip-hide').tooltip('hide');});
  4. $(function () { $('.tooltip-destroy').tooltip('destroy');});
  5. $(function () { $('.tooltip-toggle').tooltip('toggle');});
  6. $(function () { $(".tooltip-options a").tooltip({html : true });
  7. });
  8. </script>

效果图

四、插入事件

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

  1. 这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
  2. <script>
  3. $(function() {
  4. $('.tooltip-show').tooltip('show');
  5. });
  6. $(function() {
  7. $('.tooltip-show').on('show.bs.tooltip', function() {
  8. alert("Alert message on show");
  9. })
  10. });
  11. </script>

效果图

代码例子：
//判断nput框是不是为空，为空的话，给父元素增加"has-error",并让提示框工具显示出该选项不能为空的效果

function checkItem(jqObj){

	if(jqObj.attr("len")){

		var len = parseInt(jqObj.attr("len"));

		if(jqObj.attr("requried")&&$.trim(jqObj.val())==""){

			if("blank" != jqObj.attr("errortype")){

				jqObj.attr("errortype","blank");

				jqObj.parent().addClass("has-error");

				jqObj.tooltip("destroy");

				jqObj.tooltip({

					title:"该项为必填项",//（注意如果是html中有title，则显示默认的title，所以在使用自定义的title的时候需要把html中的title去掉）

					animation:false,

					placement:"bottom"

				});

				jqObj.tooltip("show");

			}

			canSubmit = false;

			return;

		}

｝

　　

Bootstrap 提示工具（Tooltip）插件的更多相关文章

  1. Bootstrap 提示工具(Tooltip)插件的事件

    事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...

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

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

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

    当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用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. MySQL实战45讲学习笔记：第七讲

    一.上节回顾今日计划 在上一篇文章中,我跟你介绍了 MySQL 的全局锁和表级锁,今天我们就来讲讲 MySQL的行锁. MySQL 的行锁是在引擎层由各个引擎自己实现的.但并不是所有的引擎都支持行锁, ...

  2. Web协议详解与抓包实战：HTTP1协议-内容协商是怎样进行的（8）

    一.内容协商的两种方式 每个 URI 指向的资源可以是任何事物,可以有多种不同的表述,例如一份文档可以有不同语言的翻译.不同的媒体格式.可以针对不同的浏览器提供不同的压缩编码等 二.Proactive ...

  3. [LeetCode] 112. Path Sum 二叉树的路径和

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  4. Django性能优化的几种方法

    1.一次性取出你所需要的数据 单一动作,需要多次连接数据库里的时候,最好一次性取出所有需要的数据,减少连接数据库的次数.此类需求推荐使用QuerySet.select_related()和prefet ...

  5. [比赛题解]CWOI2019-1

    [比赛题解]CWOI2019-1 比赛日期:2019.10.12 T1 一道神仙DP题. 我们考虑\(dp[i][j][k]\)表示最后\(i\)位数,\(i-1\)位都是9,最后一位为\(j\),最 ...

  6. 推荐一款健康App 多喝水，引领全民时尚喝水生活习惯

    推荐一款健康App 多喝水,引领全民时尚喝水生活习惯 1 介绍 多喝水,一款鼓励大众喝水的APP.我们倡导大众健康生活,培养人们爱喝水的习惯,让每一次喝水,都能产生价值,让人们在喝水的同时,可享受赚钱 ...

  7. 用友U8合同执行单保存报错，提示“语法错误或违反访问规则”

    问题描述 用户参照合同录入第一阶段的执行单,保存时提示“语法错误或违反访问规则”,其他合同均正常,只有这张合同出现这个问题. 解决过程 语法错误或违反访问规则是SQL Server常见的报错,但其他合 ...

  8. kvm虚拟机vnc配置

    通过vnc方式访问虚拟主机上的KVM虚拟机 通过虚拟主机的IP地址与端口进行访问 1.  修改qemu.conf # vi /etc/libvirt/qemu.conf vnc_listen = &q ...

  9. python爬虫—爬取英文名以及正则表达式的介绍

    python爬虫—爬取英文名以及正则表达式的介绍 爬取英文名: 一.  爬虫模块详细设计 (1)整体思路 对于本次爬取英文名数据的爬虫实现,我的思路是先将A-Z所有英文名的连接爬取出来,保存在一个cs ...

  10. WPF 精修篇 长时间线程加取消功能

    原文:WPF 精修篇 长时间线程加取消功能 <Grid> <Grid.RowDefinitions> <RowDefinition Height="11*&qu ...