Bootstrap 提示工具(Tooltip)插件方法的用法
方法
下面是一些提示工具(Tooltip)插件中有用的方法:
| 方法 | 描述 | 实例 |
|---|---|---|
| Options: .tooltip(options) | 向元素集合附加提示工具句柄。 |
$().tooltip(options) |
| Toggle: .tooltip('toggle') | 切换显示/隐藏元素的提示工具。 |
$('#element').tooltip('toggle')
|
| Show: .tooltip('show') | 显示元素的提示工具。 |
$('#element').tooltip('show')
|
| Hide: .tooltip('hide') | 隐藏元素的提示工具。 |
$('#element').tooltip('hide')
|
| Destroy: .tooltip('destroy') | 隐藏并销毁元素的提示工具。 |
$('#element').tooltip('destroy')
|
实例
下面的实例演示了提示工具(Tooltip)插件方法的用法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 提示工具(Tooltip)插件方法的用法</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:50px">
这是一个<a href="#"class="tooltip-show"data-toggle="tooltip" title="show">tooltip方法show</a>
这是一个<a href="#"class="tooltip-hide"data-toggle="tooltip"title="hide">tooltip方法hide</a>
这是一个<a href="#"class="tooltip-toggle"data-toggle="tooltip"title="toggle">tooltip方法toggle</a>
这是一个<a href="#"class="tooltip-destroy"data-toggle="tooltip"title="destroy">tooltip方法destroy</a>
<br /><br /><br /><br /><br /><br />
<p class="tooltip-option">
这是一个<a href="#"data-toggle="tooltip"title="<h2>'am Header2
</h2>">tooltip方法option</a>
</p>
</div>
<script>
$(document).ready(function () {
//$("a[data-toggle='tooltip']").tooltip();
$(".tooltip-show").tooltip("show");
$(".tooltip-hide").tooltip("hide");
$(".tooltip-toggle").tooltip("toggle");
$(".tooltip-destroy").tooltip("destroy");
$(".tooltip-option a").tooltip({html:true});
})
</script>
</body>
</html>
Bootstrap 提示工具(Tooltip)插件方法的用法的更多相关文章
- Bootstrap 提示工具(Tooltip)插件的事件
事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...
- Bootstrap 提示工具(Tooltip)插件
当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...
- Bootstrap 提示工具(Tooltip)插件
一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...
- CSS 提示工具(Tooltip)
CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: 1.基础提示工具代码如下: <!doctye ht ...
- CSS:CSS 提示工具(Tooltip)
ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...
- 如何用vs2013开发人员命令提示工具执行一个方法(一个简单的demo)
在任何一个编辑器中编写一个静态的Main方法,必须是静态且名为Main的方法,并将Main方法所在的类文件命名为yang.cs(这个名字随便命名),如图-1. 图-1 打开你的vs2013开发人员命令 ...
- 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> ...
随机推荐
- ugui获取text宽
http://www.xuanyusong.com/archives/3587 void Start () { Font font = Resources.Load<Font>(" ...
- jsp学习与提高(一)——JSP生命周期、三大指令及动作
1.jsp定义: 1.1以java语言为脚本语言,运行在服务端的程序: 1.2处理客户请求,生成页面 1.3其本质是个sevlet会生成.java文件编译后再生成.class文件 2.jsp生命周期( ...
- Ubuntu英文版中无法输入中文标点符号的问题
问题: 不管是中文还是英文输入法,输入的标点符号都是英文的 解决方法: ctrl + . 进行切换,一个是lation 符号,一个是全角符号
- Vue --6 router进阶、单页面应用(SPA)带来的问题
一.Vue-router进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二.单页面应用(SPA)带来的问题 1.虽然单页面应用有优点,但是,如果后端不做服务器渲染(h ...
- C. An impassioned circulation of affection DP
http://codeforces.com/contest/814/problem/C 12ooyomioomioo21 o2 o 这题我是用dp解的,不过好像很慢,比赛的时候算了下不会mle,就没滚 ...
- pom文件jar包缺失问题
一般情况,不在中央仓库的jar包,比如自己的版本,要用的话打入maven私服 在eclipse中引入其他项目(包含jar包),类似于放入了私服,删除工程源文件,会导致别的工程引用此jar包失效
- 升级到spring security5遇到的坑-密码存储格式
遇到的问题 将spring security oauth2(包括spring security)升级到最新,代码没有改动,运行项目没有报错,但是页面登陆时报错:There is no Password ...
- ruby 数组 Hash相互转换
由[索引, 值, ...] 型的数组变为哈希表 ary = [1,"a", 2,"b", 3,"c"] p Hash[*ary] # =&g ...
- DatabaseMetaData类
DatabaseMetaData类是java.sql包中的类,利用它可以获取我们连接到的数据库的结构.存储等很多信息.如: 1.数据库与用户,数据库标识符以及函数与存储过程. 2.数据 ...
- vuejs 组件 移动端push 没有渲染页面
this.idcards.push(arr) 这个无效 就知道了 vuejs有个跟push相同的方法 console.log(this.list.push.toString()) 这个push是个同名 ...