一、提示工具（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. js判断超过几个字符后显示省略号

  2. 怎么删除STL容器的元素

    在STL容器有顺序容器和关联容器两种. 顺序容器删除元素的方法有两种: 1.c.erase(p) 从c中删除迭代器p指定的元素.p必须指向c中一个真实元素,不能等于c.end().返回一个指向p之后元 ...

  3. nowcoder911L 最优子区间

    题目链接 思路 用\(f(i,j)\)表示前i个元素,以i为右端点,j为左端点时的答案. 用个"区间修改,单点查询"的线段树维护出第二维.在从左往右枚举i的过程中.将\([lst_ ...

  4. 【转】java 泛型详解

    java 泛型详解 对java的泛型特性的了解仅限于表面的浅浅一层,直到在学习设计模式时发现有不了解的用法,才想起详细的记录一下. 本文参考java 泛型详解.Java中的泛型方法. java泛型详解 ...

  5. [LeetCode] 438. Find All Anagrams in a String 找出字符串中所有的变位词

    Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...

  6. Spring 常犯的十大错误，这坑你踩过吗？

    阅读本文大概需要 9 分钟. 1.错误一:太过关注底层 我们正在解决这个常见错误,是因为 “非我所创” 综合症在软件开发领域很是常见.症状包括经常重写一些常见的代码,很多开发人员都有这种症状. 虽然理 ...

  7. C# HTTP系列4 HttpWebRequest.CookieContainer属性

    系列目录     [已更新最新开发文章,点击查看详细] HttpWebRequest.CookieContainer 获取或设置与此请求关联的 Cookie.默认情况下CookieContainer  ...

  8. Failed to instantiate [org.elasticsearch.client.transport.TransportClient]

    Springboot 集成 ElasticSearch,springboot报错如下: Error starting ApplicationContext. To display the auto-c ...

  9. 关于SQL server事务

  10. 字节流---Day30

    IO概述 当我们在生活中把电脑上的数据拷贝到U盘或者硬盘上时,就是进行数据传输,按照数据的流动方向,我们分为输入(input)和输出(output),即就是所谓IO流 Java中I/O操作主要是指使用 ...