一、提示工具（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使用的几条注意事项和1449错误解决方案

    一.如何在Windows终端连接MySQL? 使用cmd进入终端,然后要进入到你安装MySQL的bin目录下(如果没有的话,会出现该命令无效之类的错误),然后使用命令mysql -u root -p, ...

  2. [LeetCode] 554. Brick Wall 砖头墙壁

    There is a brick wall in front of you. The wall is rectangular and has several rows of bricks. The b ...

  3. 可以在shell脚本中使用哪些类型的变量?

    在shell脚本,我们可以使用两种类型的变量: 系统定义变量 用户定义变量 系统变量是由系统系统自己创建的.这些变量通常由大写字母组成,可以通过“set”命令查看. 用户变量由系统用户来生成和定义,变 ...

  4. 第24课 std::thread线程类及传参问题

    一. std::thread类 (一)thread类摘要及分析 class thread { // class for observing and managing threads public: c ...

  5. CAP带你轻松玩转ASP.NETCore消息队列

    CAP是什么? CAP是由我们园子里的杨晓东大神开发出来的一套分布式事务的决绝方案,是.Net Core Community中的第一个千星项目(目前已经1656 Start),具有轻量级.易使用.高性 ...

  6. Java连载12-继承开发环境&long类型

    一.集成开发环境(Integrated Develop Environment,简称IDE) 1.什么是集成开发环境 (1)集成开发环境可以使软件开发变得更简单 (2)没有IDE工具: i.需要安装J ...

  7. oracle数据库表约束、视图、索引—该记录为本人以前微博的文章

    一.Oracle 数据库常用操作续关于创建表时创建约束1.创建表的时候增加约束----约束是定义表中的数据应该遵循的规则或者满足的条件----约束是建立在列上的,让某一列或者某几列数据之间有约束--- ...

  8. HTML+css基础 三大列表

    三大列表: 1.无序列表  ul  标签属性type  决定项目符号的类型  disc(实心圆)square (方形) circle 空心圆     里面的子标签是li   2.有序列表 ol   t ...

  9. 项目Gradle版本从4.4升级到4.6

    一.背景 Gralde版本与AGP(Android Gradle Plugin)版本具有一定的对应关系,原因在于AGP实质上作为Gradle的插件,依赖于Gradle作为宿主.因此,不同的AGP版本需 ...

  10. 基础知识---IEnumerable、ICollection、IList、IQueryable

    一.定义 IEnumerable public interface IEnumerable<out T> : IEnumerable ICollection public interfac ...