bootstrap的工具提示实例代码


Posted in Javascript onMay 17, 2017

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>
Javascript 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
js字符串与Unicode编码互相转换
May 17 #Javascript
JavaScript实现省市县三级级联特效
May 16 #Javascript
原生js简单实现放大镜特效
May 16 #Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 #Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 #Javascript
Vue.js tab实现选项卡切换
May 16 #Javascript
Vue.js手风琴菜单组件开发实例
May 16 #Javascript
You might like
Smarty模板快速入门
2007/01/04 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
python反扒机制的5种解决方法
2021/02/06 Python
超市国庆节促销方案
2014/02/20 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
慰问信模板
2015/02/14 职场文书
高中生军训感言
2015/08/01 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
赞美教师的句子
2019/09/02 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
python 实现体质指数BMI计算
2021/05/26 Python
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫