bootstrap的工具提示实例代码
Bootstrap 工具提示（Tooltip）插件 当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。
工具提示实现代码如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>XXX</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" >
<link rel="stylesheet" href="css/main.css" rel="external nofollow" >
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body style="margin: 200px;">
<!--系统默认提示-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="默认提示">系统默认</a>
<!--bootstrop的工具提示，还需要写jQuery才能实现-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bootstrop提示" data-toggle="tooltip">bootstrop的工具提示</a>
<!--data-animation默认 true，在 tooltip 上应用一个 CSS fade 动画。
如果设置 false，则不应用。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="animation" data-toggle="tooltip" data-animation="false">data-animation</a>
<!--data-html默认 false，不允许提示内容格式为 html。如果设置
为 true，则可以设置 html 格式的提示内容。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="<b>html</b>" data-toggle="tooltip" data-html="true">data-html</a>
<!--data-placement默认值 top，还有 bottom、left、right 和 auto。
如果 auto 会自行调整合适的位置， 如果是 auto left
则会尽量在左边显示，但左边不行就靠右边。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="placement" data-toggle="tooltip" data-placement="bottom">data-placement</a>
<!--data-trigger默认值 hover foucs，表示怎么触发 tooltip，其
他值为： click、 manual。多个值用空格隔开， manual
手动不能和其他同时设置。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="trigger" data-toggle="tooltip" data-trigger="click">data-trigger</a>
<!--data-delay默认值 0，延迟触发 tooltip(毫秒)，如果传数字则，
表示 show/hide 的毫秒数，如果传对象，结构为：{show:500,hide:100}这个要在jQuery中才能实现-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="delay" data-toggle="tooltip" data-delay="2000">data-delay</a>
<!--data-template更改提示框的 HTML 提示语的模版，默认值为：<div
class='tooltip'><div
class='tooltip-arrow'></div><div
class='tooltip-inner'></div></div>。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="template" data-toggle="tooltip" data-template="<b>123<b/>">data-template</a>
<br>
<br>
<br>
<!--data-selector默认 false，可以选择绑定指定的选择器。必须要用它的父类才能实现，使用jQuery-->
<div id="selection">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="绑定选择器" rel="tooltip" data-toggle="tooltip">绑定选择器</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="绑定选择器" data-toggle="tooltip">绑定选择器</a>
</div>
<br>
<br>
<br>
<!--使用按钮组，给工具提示暂用的地方很小，所以提示会被挤压变形，按钮也会被挤动，所以、
应该分配更大的空间给提示来显示-->
<!--data-container默认值 false，将 tooltip 附加到特定的元素上。比
如组合按钮组提示，容器不够，可以附加 body 上。
container : 'body',需要使用jQuery-->
<div class="btn-group">
<button class="btn btn-default" title="按钮" data-toggle="tooltip">1</button>
<button class="btn btn-default" title="按钮" data-toggle="tooltip">2</button>
<button class="btn btn-default" title="按钮" data-toggle="tooltip">3</button>
</div>
<br>
<br>
<br>
<br>
<!--其他show、hide、toggle 和 destroy 四种方法-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="点击弹出提示" data-toggle="tooltip" id="clc">点击弹出提示</a>
<button class="btn btn-default" id="btn">点击弹出或隐藏提示</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
<script>
// $('a').tooltip();
/*selector*/
$('#selection').tooltip({
selector: 'a[rel=tooltip]'
});
/*container*/
$('button').tooltip({
delay: {
show: 100,
hide: 100
},
container: 'body'
});
/*其他方法*/
$('#clc').tooltip({
trigger:'click'
});
$('#btn').on('click', function () {
$('#clc').tooltip('show');
/* $('#clc').tooltip('hide');
$('#clc').tooltip('toggle');
$('#clc').tooltip('destory');*/
});
/*4个事件
* show.bs.tooltip 在提示框显示前立即触发
shown.bs.tooltip 在提示框完全显示给用户之后触发
hide.bs.tooltip 在提示框隐藏前立即触发
hidden.bs.tooltip 在提示框完全隐藏之后触发
* */
$('a').on('show.bs.tooltip', function () {
alert('在提示框显示前立即触发');
});
</script>
</body>
</html>
相关推荐
-
Bootstrap每天必学之工具提示（Tooltip）插件
当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发.工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息. 如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js.或者,正如Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min
-
bootstrap的工具提示实例代码
Bootstrap 工具提示(Tooltip)插件 当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发.工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息. 工具提示实现代码如下所示: <!DOCTYPE html> <html lang="zh-CN"> <hea
-
BootStrap数据表格实例代码
首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:
-
BootStrap 导航条实例代码
一.默认的导航条 制作默认的导航条,可分以下几步: 1.在ul里加上(ul class="nav navbar-nav")样式: 2.在ul外加一层div或nav(ps:HTML5新属性),并且添加样式(div class="navbar nabar-default"); <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> &l
-
使用Bootstrap美化按钮实例代码(demo)
在HTML5中,按钮的常用属性主要为背景颜色和大小 demo代码演示 一. input标签: <input type="button" value="按钮" class="btn"/> 二. button标签:(这里用button标签举例) <button type="button" class="btn btn-defult">提交</button> btn 表示基本样
-
Bootstrap笔记—折叠实例代码
1. 基础折叠 展示如下: <body> <div class="container"> <!-- 按钮 --> <button class="btn btn-default" data-toggle="collapse" data-target="#shows">按钮</button> <!-- 折叠内容 --> <div id="sho
-
AngularJS Bootstrap详细介绍及实例代码
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.
-
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.
-
Bootstrap与Angularjs的模态框实例代码
先给大家展示下效果图,感兴趣的朋友参考下实现代码吧 效果图如下所示: 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.
-
表格展示利器 Bootstrap Table实例代码
1.Bootstrap Bable 全部数据导出分析 在表格导出数据中,发现设置了分页参数,导出的数据仅为表格加载的分页参数数据,于是,针对这样的情况,通过设置分页参数的值,使表格可以加载更多的数据,可达到导出所有数据的功能需求.然而,在实际的实验中,发现此方案存在以下问题: 表格一次加载一千条数据时,网页响应速度太慢,加载数据等待时间严重过长.(一分钟左右) Bootsrtap Table 的文件导出是纯前端的js导出模式,它的数据源只能为表格中的数据集合 分析产生上述问题的原因,不难发现,h
-
Bootstrap 3 按钮标签实例代码
本文给大家介绍按钮标签的实例代码,具体内容如下: 通过将按钮类添加到 <a>, <button>, <input> 来实现按钮样式 <a class="btn btn-default" href="#" rel="external nofollow" role="button">Link</a> <button class="btn btn-def