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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
jQuery知识点整理
Jan 30 Javascript
原生js编写焦点图效果
Dec 08 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
PHP中的use关键字概述
2014/07/23 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
简单的php购物车代码
2020/06/05 PHP
简明json介绍
2008/09/28 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python 类之间的参数传递方式
2019/12/20 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
承办会议欢迎词
2014/01/17 职场文书
教师辞职报告范文
2014/01/20 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
婚庆答谢词
2015/01/04 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis