您的位置：首页 > Web前端 > BootStrap

Bootstrap 提示工具(Tooltip)插件方法的用法

2015-11-29 22:13 726 查看

方法

下面是一些提示工具（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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航