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 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
微信小程序实现图片上传功能
May 28 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
PHP 字符串分割和比较
2009/10/06 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
PHP实现简单的计算器
2020/08/28 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
JS 对象介绍
2010/01/20 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
详谈javascript异步编程
2016/02/21 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
JS实现的对象去重功能示例
2019/06/04 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
理解Python中函数的参数
2015/04/27 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
Python检查ping终端的方法
2019/01/26 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
广州盈通面试题
2015/12/05 面试题
学生励志演讲稿
2014/01/06 职场文书
工会换届选举方案
2014/05/21 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
公司费用报销管理制度
2015/08/04 职场文书