Bootstrap提示框效果的实例代码


Posted in Javascript onJuly 12, 2017

本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记

前面的话

提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语。本文将详细介绍Bootstrap提示框

基本用法

Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件:

1、通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息),title属性的优先级高

2、通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top、right、bottom和left,分别表示提示框出现的位置在顶部、右边、底部和左边

3、还有一个最重要的参数不可缺少,data-toggle="tooltip"

【触发方式】

Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发

最简单的触发方式如下:

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
<body style="margin:80px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title="左边提示框">提示框居左</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="提示框在顶部">提示框在顶部</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-original-title="提示框在底部">提示框在底部</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="提示框居右">提示框居右</button>
<script>
$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});  
</script>

Bootstrap提示框效果的实例代码

属性参数

提示框组件提供了7个自定义属性参数,用来对提示框进行设置

Bootstrap提示框效果的实例代码

<body style="margin-top:80px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="无动画" data-animation="false" >无动画</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="有动画" >有动画</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="hover触发" data-trigger="hover">hover触发</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="click触发" data-trigger="click">click触发</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="不延迟">不延迟</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="延迟500ms" data-delay="500">延迟500ms</button>
<script>
$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});  
</script>

Bootstrap提示框效果的实例代码

JS触发

除了上面所说的最简单的一种触发方法,也可以单独指定一个元素,在该元素上调用Tooltip组件,并且还可以提供各种javascript形式的自定义参数,而无需使用以data-开头的元素自定义属性

$(element).tooltip(options);

Bootstrap提示框效果的实例代码

<button type="button" class="btn btn-default" data-toggle="tooltip" >按钮</button>
<script>
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
    title:"我是提示语",
    placement:'right'
  });
});  
</script>

Bootstrap提示框效果的实例代码

【关键字】

除了使用options对象,还可以使用关键字,'show'、'hide'、'toggle'、'destroy'

<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn4">按钮4</button>
<script>
$(function(){
  $('#btn1').tooltip('show');//显示提示语
  $('#btn2').tooltip('hide');//关闭提示语
  $('#btn3').tooltip('toggle');//反转提示语
  $('#btn4').tooltip('destroy');//隐藏并销毁提示语
});  
</script>
</body>

 Bootstrap提示框效果的实例代码

【事件】

该插件支持5种类型的事件订阅

  1. show.bs.tooltip        show方法调用之后立即触发该事件
  2. shown.bs.tooltip  

    此事件在tooltip已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发

  3. hide.bs.tooltip        hide方法调用之后立即触发该事件。
  4. hidden.bs.tooltip     此事件在tooltip被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
  5. inserted.bs.tooltip    当tooltip模板加载到DOM中上时,在show.bs.tooltip触发后,触发该事件
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="提示信息" id="btn">按钮</button>
<script>
$(function(){
  $('#btn').tooltip();
  $("#btn").on("show.bs.tooltip",function(e){
    $(this).html('关闭提示');  
  }).on("hide.bs.tooltip",function(e){
    $(this).html('打开提示');
  })

});  
</script>

Bootstrap提示框效果的实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js两行代码按指定格式输出日期时间
Oct 21 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
js实现常见的工具条效果
Mar 02 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
详解React 元素渲染
Jul 07 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
微信小程序input抖动问题的修复方法
Mar 03 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 #Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 #Javascript
微信小程序 共用变量值的实现
Jul 12 #Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 #Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 #Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 #Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 #Javascript
You might like
Laravel 5框架学习之环境与配置
2015/04/08 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Python实现手绘图效果实例分享
2020/07/22 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
会计学生自我鉴定
2014/02/06 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
小学师德师风整改措施
2014/10/27 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
导游词之唐山景点
2019/12/18 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
详解python的异常捕获
2022/03/03 Python