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 ...
随机推荐
- MySQL实战45讲学习笔记：第六讲
一.今日内容概要 今天我要跟你聊聊 MySQL 的锁.数据库锁设计的初衷是处理并发问题.作为多用户共享的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则.而锁就是用来实现这些访问规则的重 ...
- JVM系列之七：HotSpot 虚拟机
1. 对象的创建 1. 遇到 new 指令时,首先检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载.解析和初始化过.如果没有,执行相应的类加载. 2 ...
- C# HTTP系列6 HttpWebResponse.StatusCode 响应代码中文详解
系列目录 [已更新最新开发文章,点击查看详细] 1xx - 信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应 · 100 - Continue ...
- VUE引入jq bootstrap 之终极解决方案（测试）
初入VUE遇见的一些问题,在网上找了些方法,再根据自己的实际项目解决的问题写得此文,,希望对你有所帮助. vue-cli快速构建项目以及引入boostrap.jq各种插件配置 vue-cli脚手架工具 ...
- ng使用bootstrap
1.在项目中使用命令 npm i bootstrap -s来创建bootstrap 2.创建完成之后在 angular.json中引入进去 "styles": [ ...
- 前端开发vscode必备插件
VSCode 插件 Atom one Dark Theme Atom Dark主题 Auto Close Tag 自动关闭标签 Auto Rename Tag 自动重命名标签 Beautify 格式化 ...
- 缓存雪崩、穿透如何解决，如何确保Redis只缓存热点数据？
缓存雪崩如何解决? 缓存穿透如何解决? 如何确保Redis缓存的都是热点数据? 如何更新缓存数据? 如何处理请求倾斜? 实际业务场景下,如何选择缓存数据结构 缓存雪崩 缓存雪崩简单说就是所有请求都从缓 ...
- ELK学习笔记之ElasticSearch的集群(Cluster),节点(Node),分片(Shard),Indices(索引),replicas(备份)之间关系
[Cluster]集群,一个ES集群由一个或多个节点(Node)组成,每个集群都有一个cluster name作为标识----------------------------------------- ...
- WPF 高级篇 MVVM 附加属性
原文:WPF 高级篇 MVVM 附加属性 WPF 特性之一 附加属性 在本文里实现文本框内容的验证 public class TextBoxHelper:DependencyObject { publ ...
- kafka原理详解之各种offset和checkpoint
每一个分区都是一个顺序的.不可变的消息队列,并且可以持续的添加.分区中的消息都被分配了一个序列号,称之为偏移量(offset),在每个分区中此偏移量都是唯一的.一个分区在文件系统里存储为一个文件夹.文 ...