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 相关文章推荐
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
Vue3为什么这么快
Sep 23 Javascript
vue将文件/图片批量打包下载zip的教程
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
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
处理单名多值表单的详解
2013/06/08 PHP
php 实现进制相互转换
2016/04/07 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
Linux的文件类型
2016/07/05 面试题
物业消防安全责任书
2014/07/23 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
出纳工作检讨书
2014/10/18 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
python基础入门之字典和集合
2021/06/13 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python