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 相关文章推荐
javascript中获取下个月一号,是星期几
Jun 01 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
详解jQuery-each()方法
Mar 13 jQuery
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
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
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
python实现密码强度校验
2020/03/18 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
人事部岗位职责范本
2014/03/05 职场文书
教研活动总结
2014/04/28 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
加薪申请报告范本
2015/05/15 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
致接力运动员加油稿
2015/07/21 职场文书
婚宴致辞
2015/07/28 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis