一、提示工具（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. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  2. Web协议详解与抓包实战：HTTP1协议-请求与响应的上下文（7）

    一.请求的上下文: User-Agent 指明客户端的类型信息,服务器可以据此对资源的表述做抉择 二.请求的上下文: Referer 浏览器对来自某一页面的请求自动添加的头部 截图2 这对于我们的防盗 ...

  3. Eureka工作原理分析

    demo源码地址:https://github.com/flyingJiang/SpringCloud 首先,单独使用Eureka. Eureka整合Ribbon 未完待续……

  4. git拆分仓库

    1.git filter-branch拆分当前分支 修改仓库目录,改成拆分后的结构 创建一个当前分支的拷贝分支 git filter-branch -f --tag-name-filter cat - ...

  5. 2018-2019-2 20162329 《网络对抗技术》Exp7： 网络欺诈防范

    目录 Exp7: 网络欺诈防范 一. 基础问题回答 1. 通常在什么场景下容易受到DNS spoof攻击 二. 实验过程 1. 简单应用SET工具建立冒名网站 2. ettercap DNS spoo ...

  6. pandas的使用（7）--分组

    pandas的使用(7)--分组

  7. C#异步的世界【上】（转）

    新进阶的程序员可能对async.await用得比较多,却对之前的异步了解甚少.本人就是此类,因此打算回顾学习下异步的进化史. 本文主要是回顾async异步模式之前的异步,下篇文章再来重点分析async ...

  8. service的yaml说明

    apiVersion: v1 kind: Service metadata: name: nginx-service labels: app: nginx spec: ports: - port: 8 ...

  9. thinkphp 分页类 url 编码处理

    在做thinkphp分页的时候  thinkphp 中的分页 有一个小问题 就是 在有form 表单 搜索中文的时候,点击下一页的话 中文会被转换成编码. 如图: 最直接的方法就是 直接修改 thin ...

  10. table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示

    1,设置css样式 <style>table {width: 100%;float: left;table-layout:fixed;width:600px;border:1px soli ...