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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
angular简介和其特点介绍
Jan 29 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
JavaScript代码实现简单计算器
Dec 27 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编写PDF文档生成器
2006/10/09 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
改进Django中的表单的简单方法
2015/07/17 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
解决yum对python依赖版本问题
2019/07/05 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
现场施工员岗位职责
2015/04/11 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
黑白记忆观后感
2015/06/18 职场文书
同学会感言
2015/07/30 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
手残删除python之后的补救方法
2021/06/26 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers