方法

下面是一些提示工具（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)插件方法的用法的更多相关文章

  1. Bootstrap 提示工具(Tooltip)插件的事件

    事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...

  2. Bootstrap 提示工具(Tooltip)插件

    当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...

  3. Bootstrap 提示工具（Tooltip）插件

    一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过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. 如何用vs2013开发人员命令提示工具执行一个方法（一个简单的demo）

    在任何一个编辑器中编写一个静态的Main方法,必须是静态且名为Main的方法,并将Main方法所在的类文件命名为yang.cs(这个名字随便命名),如图-1. 图-1 打开你的vs2013开发人员命令 ...

  7. Bootstrap-Plugin：提示工具（Tooltip）插件

    ylbtech-Bootstrap-Plugin:提示工具(Tooltip)插件 1.返回顶部 1. Bootstrap 提示工具(Tooltip)插件 当您想要描述一个链接的时候,提示工具(Tool ...

  8. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

  9. BootStrap之 提示工具（Tooltip）插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. U3D shaderlab 相关指令开关

    Subshader { [Tags] [CommonState] Passdef [Passdef ...] }Tags分为SubShader Tags和Pass Tags,Tags放在SubShad ...

  2. Solr 6.7学习笔记（08）-- Facet

    在搜索中,我们搜索时,通常会自动返回一些相关的搜索.比如,你搜索了一本书,会自动返回作者信息加上他的其它书籍的数量.这种功能在Solr中称之为Facet.不太好翻译.下面对于参数的说明,我以搜索“手机 ...

  3. poj3164(最小树形图&朱刘算法模板)

    题目链接:http://poj.org/problem?id=3164 题意:第一行为n, m,接下来n行为n个点的二维坐标, 再接下来m行每行输入两个数u, v,表点u到点v是单向可达的,求这个有向 ...

  4. [Xcode 实际操作]六、媒体与动画-(15)使用AudioPlayer播放音乐

    目录:[Swift]Xcode实际操作 本文将演示如何播放音频素材. 在项目名称上点击鼠标右键,弹出右键菜单, 选择[Add Files to "DemoApp"],往项目中导入文 ...

  5. django后台管理系统(admin)的简单使用

    目录 django后台管理系统的使用 检查配置文件 检查根urls.py文件 启动项目,浏览器输入ip端口/admin 如: 127.0.0.1/8000/admin 回车 注册后台管理系统超级管理 ...

  6. [NWPU2016][寒假作业][正常版第三组]搜索和二分 N

    题意,一条数轴上,告诉你起点和终点,只能向前走1,向后走1,或者走到二倍的现在的位置,每次都耗时一分钟.问从起点到终点的最短时长. 简单地bfs #include <iostream> # ...

  7. NET Core的分布式批处理框架

    NET Core的分布式批处理框架 Swift是什么 从文章的标题可知:此Swift非Apple那个Swift,只是考虑这个词的含义比较适合. Swift是一个基于.NET Core的分布式批处理框架 ...

  8. MVC3 自定义的错误页

    ASP.NET MVC3中如果配置文件出错了,怎么跳转到自定义的错误页,现在参考网上的档案是说 添加 如下配置文件,并且在路径Views/Shared/下添加Error页面,测试下没有用的,请大家看看 ...

  9. [转]使用 HTML5 WebSocket 构建实时 Web 应用

    HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例 ...

  10. ajax请求拿到多条数据拼接显示在页面中

    首先我们拿到的了一坨Json数据 如下 然后通过ajax请求拿到数据 在ajax的success方法中处理和使用数据: 其中包括: 用eval处理这种数据 var outStr = eval('('+ ...