BootStrap tooltip提示框使用小结


Posted in Javascript onOctober 26, 2016

提示框

提示框的基本使用方式为:

<span data-toggle="tooltip" data-original-title="this is alert content">test message</span>

data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title

提示框不提供HTML触发方式只能通过JS来进行触发:

$("[data-toggle='tooltip']").tooltip();

提示框的关键属性为data-original-title="content",该属性就是我们要提示的信息,如果不存在该属性则回去检索title属性,title的属性值同样可以用来显示

由于提示框只能通过JS来进行触发,而且data-toggle在BootStrap中就是一个说明功能的属性,所以通常提示框的元素上都会设置data-toggle="tooltip",这只是为了可以选中这个DOM节点,也可以设置为class="xx"

提示信息默认是在元素上边显示的我们可以通过属性data-placement来进行更改,它有五个值分别为top、bottom、left、right、auto,如果设置为data-placement="auto"则选择适当的位置显示提示信息

提示框提供的剩余的几个属性分别为

1.data-animation在提示信息上应用一个fade动画,默认值为true

2.data-html可以将HTML作为提示语,默认值为false

3.data-selector如果声明selector表示的元素就可以提示信息

4.data-trigger通过什么方式来触发提示信息,默认值为focus、hover,全部值为focus、hover、click、manual可以使用多种出发方式,使用多种时中间以空格隔开

5.data-delay延迟提示信息默认值为0

6.data-container将提示信息放在执行的元素上,默认为false,当在.btn-group和.input-group内使用提示信息是要设置为data-container="body"

7.data-template提示语的默认模板

JS使用

tooltip提供了四个参数分别为:show、hide、toggle、destory分别对应显示、隐藏、切换、销毁

使用方式为:

$("[data-toggle=tooltip]").tooltip("show")

tooltip同样提供了四个事件分别为:

1.show.bs.tooltip在显示之前触发

2.shown.bs.tooltip在显示之后触发

3.hide.bs.tooltip在隐藏之前触发

4.hidden.bs.tooltip在隐藏之后触发

使用方式为:

$("[data-toggle=tooltip]").on("show.bs.tooltip",function(){})

tooptip提供的参数对象属性就是前面的集中在使用时去掉"data-"即可

基本的使用方式都很简单,这里介绍一个selector的用法,该属性一般用在新添加的元素仍然需要显示提示框的场景中,所以在使用时要在提示框的父级上绑定提示框的调用方法,事件源是selector的DOM可以触发事件,使用的就是冒泡的思想使用方式为:

$("element").tooltip({
 selector:".className"
})

当在.btn-group和.input-group内的元素使用tooltip时要设置container:"body"避免不必要的副作用。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

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

Javascript 相关文章推荐
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
js实现跨域的多种方法
Dec 25 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
Bootstrap CDN和本地化环境搭建
Oct 26 #Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 #Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 #Javascript
Bootstrap 实现查询的完美方法
Oct 26 #Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 #Javascript
jquery延迟对象解析
Oct 26 #Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 #Javascript
You might like
在WIN98下以apache模块方式安装php
2006/10/09 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
调整PHP的性能
2013/10/30 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
Python 3中print函数的使用方法总结
2017/08/08 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
初一家长会邀请函
2014/01/31 职场文书
体育教学随笔感言
2014/02/24 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
保护动物的宣传语
2015/07/13 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server