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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
js编写三级联动简单案例
Dec 21 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
微信小程序单选框自定义赋值
May 26 Javascript
浅谈react路由传参的几种方式
Mar 23 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的时间戳与具体时间转化的简单实现
2016/06/13 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
python爬取各类文档方法归类汇总
2018/03/22 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
wxPython实现整点报时
2019/11/18 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python中xlrd模块的使用详解
2021/02/01 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
你常见到的runtime exception
2016/09/05 面试题
自荐信如何“自荐”
2013/10/24 职场文书
业务经理岗位职责
2013/11/11 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
文明单位申报材料
2014/12/23 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
经理岗位职责范本
2015/04/15 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android