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>

时间: 2024-10-17 22:59:31

Bootstrap 提示工具(Tooltip)插件方法的用法的相关文章

Bootstrap 提示工具(Tooltip)插件

当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具(Tooltip)插件根据要求生成内容和标记,默认情况是把提示工具放在它们触发元素的后面,您可以有以下两种方式来添加提示工具. 1.通过data属性,如需要添加一个提示工具,只需要向一个锚链标签添加data-toggle="tooltip"即可.锚的title即为提示工具(tooltip)的

使用bootstrap中的toolTip插件时 最上方提示会被遮挡问题

Bootstrap 里的 popover 被挡住的解决方案 在Bootstarp 中我们可以使用 popover 插件做一些内容的展示, 代码如下: <a data-toggle="popover" data-placement="top" data-trigger="hover" data-content="详情详情详情"> <span>显示详情</span> </a> 这样子

如何用vs2013开发人员命令提示工具执行一个方法(一个简单的demo)

在任何一个编辑器中编写一个静态的Main方法,必须是静态且名为Main的方法,并将Main方法所在的类文件命名为yang.cs(这个名字随便命名),如图-1. 图-1 打开你的vs2013开发人员命令提示,如图-2. 图-2 注意图-2中的第一行是一个路径,将名为yang.cs的类文件放入到这个路径中,如图-3. 图-3 在vs2013开发人员命令提示中输入csc yang.cs,并按下回车键,如图-4. 图-4 再看看路径下发生了什么(生成了一个yang.exe的可执行程序),如图-5. 图-

Bootstrap 工具提示(Tooltip)插件

Bootstrap 工具提示(Tooltip)插件 当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发.工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息. 如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js. 当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提

Bootstrap 学习之js插件(下拉菜单(Dropdown)插件)

Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容: 通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示: <div class="

基于jquery的提示框JavaScript 插件,类Bootstrap

目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://github.com/Ethan-Xie/message 实例 通过此此插件可以为提示栏添加自动/点击消失的功能 用法 需引入message.css与message.js <link rel="stylesheet" href="message.css"> &l

bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件  构建html代码 在表单中,若对某一字段想添加验证规则,默认需要以<div class="form-group"></div>包裹(对应错误提示会根据该class值定位),内部<input class="form-control" /&

Bootstrap 历练实例 - 折叠(Collapse)插件方法

方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $('#identifier').collapse({ toggle: false }) Toggle: .collapse('toggle') 切换显示/隐藏可折叠元素. $('#identifier').collapse('toggle') Show: .collapse('show') 显示可折叠元

Bootstrap历练实例:下拉菜单插件方法的使用

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:下拉菜单插件方法的使用</title> <meta charset="utf-8" /> <meta name="v