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 跳转代码集合
Dec 03 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
原生js编写2048小游戏
Mar 17 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
Canvas实现微信红包照片效果
Aug 21 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
团日活动总结范文
2014/04/25 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
简单的辞职信模板
2015/05/12 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript