Bootstrap 提示工具（Tooltip）插件
一、提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。
有以下两种方式添加提示工具（tooltip）：
1、通过data属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。
- <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
2、通过 JavaScript 触发提示工具（tooltip）：
- $('#identifier').tooltip(options)
二、基本的提示工具（Tooltip）示例：
html与js代码
- <h4>提示工具（Tooltip）插件 - 锚</h4>
- 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"title="默认的 Tooltip"> 默认的 Tooltip</a>
- <br />
- <h4>提示工具（Tooltip）插件 - 按钮</h4>
- <button type="button" class="btn btn-default" data-toggle="tooltip"title="默认的 Tooltip">默认的 Tooltip</button>
- <script>
- $(function() {
- $("[data-toggle='tooltip']").tooltip();
- });
- </script>
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 提示工具（Tooltip）插件</title>
- <meta charset="utf-8">
- <link rel="stylesheet" href="css/bootstrap.min.css">
- <script src="js/jquery.min.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </head>
- <body>
- <div class="container">
- <h4>提示工具（Tooltip）插件 - 锚</h4>
- 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"title="默认的 Tooltip"> 默认的 Tooltip</a>
- <br />
- <h4>提示工具（Tooltip）插件 - 按钮</h4>
- <button type="button" class="btn btn-default" data-toggle="tooltip"title="默认的 Tooltip">默认的 Tooltip</button>
- <script>
- $(function() {
- $("[data-toggle='tooltip']").tooltip();
- });
- </script>
- </div>
- </body>
- </html>
效果图
三、
下面是一些提示工具（Tooltip）插件中有用的方法：
html代码
- 这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"title="show">Tooltip 方法 show </a>.
- 这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"data-placement="left" title="hide">Tooltip 方法 hide </a>.
- 这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"data-placement="top" title="destroy">Tooltip 方法 destroy </a>.
- 这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"data-placement="bottom" title="toggle">Tooltip 方法 toggle </a>.
- <p class="tooltip-options">这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">Tooltip 方法 options </a>.</p>
js代码
- <script>
- $(function () { $('.tooltip-show').tooltip('show');});
- $(function () { $('.tooltip-hide').tooltip('hide');});
- $(function () { $('.tooltip-destroy').tooltip('destroy');});
- $(function () { $('.tooltip-toggle').tooltip('toggle');});
- $(function () { $(".tooltip-options a").tooltip({html : true });
- });
- </script>
效果图
四、插入事件
下表列出了提示工具（Tooltip）插件中要用到的事件。这些事件可在函数中当钩子使用。
- 这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
- <script>
- $(function() {
- $('.tooltip-show').tooltip('show');
- });
- $(function() {
- $('.tooltip-show').on('show.bs.tooltip', function() {
- alert("Alert message on show");
- })
- });
- </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）插件的更多相关文章
- Bootstrap 提示工具(Tooltip)插件的事件
事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...
- Bootstrap 提示工具(Tooltip)插件方法的用法
方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...
- Bootstrap 提示工具(Tooltip)插件
当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...
- CSS 提示工具(Tooltip)
CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: 1.基础提示工具代码如下: <!doctye ht ...
- CSS：CSS 提示工具(Tooltip)
ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...
- Bootstrap-Plugin：提示工具（Tooltip）插件
ylbtech-Bootstrap-Plugin:提示工具(Tooltip)插件 1.返回顶部 1. Bootstrap 提示工具(Tooltip)插件 当您想要描述一个链接的时候,提示工具(Tool ...
- bootstrap 支持的JavaScript插件
一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...
- BootStrap之 提示工具（Tooltip）插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
随机推荐
- Git分支的介绍及Gitlab的部署
Git分支介绍几乎所有的版本控制系统都以某种形式支持分支. 使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线.Git 处理分支的方式可谓是难以置信的轻量,创建新分支这一操作几乎能在 ...
- [LeetCode] 904. Fruit Into Baskets 水果装入果篮
In a row of trees, the i-th tree produces fruit with type tree[i]. You start at any tree of your cho ...
- Github库名命名规范
必要性说明 由于迁移到Github上的项目越来越多,对项目的管理越来越困难.由于各项目命名具有随意性,用之代表git仓库名后就很难快速回忆起这个项目的相关细节,通常需要不断打开某个库才能有所了解.因此 ...
- Kubernetes 学习（九）Kubernetes 源码阅读之正式篇------核心组件之 Scheduler
0. 前言 继续上一篇博客阅读 Kubernetes 源码,参照<k8s 源码阅读>首先学习 Kubernetes 的一些核心组件,首先是 kube-scheduler 本文严重参考原文: ...
- sql 自动增加排序 并且初始值是000001
declare @co_num int, @CoNum varchar(6) select co_num=count(*)+1 from tab ...
- （十六）golang--匿名函数
Go支持匿名函数,如果我们某个函数只是使用一次,可以考虑使用匿名函数,匿名函数也可以实现多次调用: 匿名函数的使用方式:(1)在定义匿名函数的时候就直接调用,这种方式匿名函数只调用一次: (2)将匿名 ...
- 动手学深度学习8-softmax分类pytorch简洁实现
定义和初始化模型 softamx和交叉熵损失函数 定义优化算法 训练模型 import torch from torch import nn from torch.nn import init imp ...
- 使用Docker构建Jekyll框架网站
使用Docker构建Jekyll框架网站 使用dockerfile构建apache + jekyll 目录 Jekyll基础镜像 构建Jekyll基础镜像 Apache镜像 构建Jekyll Apac ...
- sql server报【从varchar数据类型到datetime数据类型的转换产生一个超出范围的值】错误的解决办法
产生这个错误的原因是在使用convert函数将给定的日期字符串转换为日期类型的时候,因为datetime这个数据类型有时间数值的范围限定,当超出时间范围时就抛出这个错误. 如果类型是[datetime ...
- Linux系统安装snmp服务
Linux安装snmp详解 Snmp一种网络之间的传输协议,通过snmp可以采集很多指标比如cpu.内存及磁盘的信息,现在越来越多的网络设备基本上都支持snmp,本文介绍了snmp的安装过程. 二.安 ...