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 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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实现的生成静态HTML速度快类库
2007/03/31 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
python中turtle库的简单使用教程
2020/11/11 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
Python与C++中梯度方向直方图的实现
2022/03/17 Python