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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
webpack入门+react环境配置
Feb 08 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
vue3.0 上手体验
Sep 21 Javascript
JavaScript的Set数据结构详解
Feb 18 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
Zerg兵种介绍
2020/03/14 星际争霸
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python机器学习之神经网络(一)
2017/12/20 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
最热门的自我评价
2013/12/30 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
一年级学生期末评语
2014/04/21 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
抗震救灾标语
2014/06/26 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
建国大业电影观后感
2015/06/01 职场文书
心得体会格式及范文
2016/01/25 职场文书
高一数学教学反思
2016/02/18 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS