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.js是否已加载的判断代码
May 20 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
详解TypeScript中的类型保护
Apr 29 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
对盗链说再见...
2006/10/09 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
JS实现的雪花飘落特效示例
2019/12/03 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python实现自动发送报警监控邮件
2018/06/21 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
董事长职责范文
2013/11/08 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
阳光体育活动总结
2014/04/30 职场文书
监察建议书格式
2014/05/19 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python