BootStrap tooltip提示框使用小结
作者:y丶卿 发布时间:2023-07-02 05:25:25
提示框
提示框的基本使用方式为:
<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实战教程
猜你喜欢
- 前言大家好,这次写作的目的是为了加深对数据可视化pyecharts的认识,也想和大家分享一下。如果下面文章中有错误的地方还请指正,哈哈哈!!
- Pygame精灵和碰撞检测今天来看看python最出名的游戏库pygame。学习两个名词:精灵和碰撞检测。精灵英文字母是Sprite。Spr
- 本文实例讲述了Python素数检测的方法。分享给大家供大家参考。具体如下:该程序实现了素数检测器功能,如果结果是true,则是素数,如果结果
- 说到机器学习,大家首先想到的可能就是Python和算法了,其实光有Python和算法是不够的,数据才是进行机器学习的前提。大多数的数据都会存
- pandas官方文档:https://pandas.pydata.org/pandas-docs/stable/?v=20190307135
- 有个excle表格需要做一些过滤然后写入数据库中,但是日期类型的cell取出来是个数字,于是查询了下解决的办法。基本的代码结构data =
- 本文实例讲述了PHP基于phpqrcode生成带LOGO图像的二维码。分享给大家供大家参考。具体如下:这里PHP使用phpqrcode生成带
- 虽然以前我写过IE6、IE7、IE8共存的解决方案,但是看到IETester这个软件以后那些都已经没有意义了(那些办法副作用比较大,而且实现
- 这个阶段一直在做和梯度一类算法相关的东西,索性在这儿做个汇总:一、算 * 述梯度下降法(gradient descent)别名最速
- 函数调用方法:numpy.zeros(shape, dtype=float)各个参数意义:shape:创建的新数组的形状(维度)。dtype
- 在使用pycharm开发工具连接mysql数据库时提示错误,信息如下:Server returns invalid timezone. Go
- 使用python制作好看的时钟,供大家参考,具体内容如下游戏用到初高中使用的三角函数等知识开发,长话短说,上完整程序。#-*- coding
- 一般情况下,mysql会默认提供多种存储引擎,可以通过下面的查看:1)查看mysql是否安装了innodb插件。通过下面的命令结果可知,已经
- Python中专门提供了telnetlib库,用来完成基于telnet协议的通信功能。python3下使用telnetlib模块连接网络设备
- 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改:s = Student()s.sco
- OpenCV是应用最被广泛的的开源视觉库。他允许你使用很少的代码来检测图片或视频中的人脸。这里有一些互联网上的教程来阐述怎么在OpenCV中
- 本文实例讲述了PHP变量作用域(全局变量&局部变量)&global&static关键字用法。分享给大家供大家参考,具
- keras非常方便。不解释,直接上实例。数据格式如下:序号 天气 是否周末 是否有促销 销量1 坏 &n
- 前言春联是中国传统文化中最具内涵的元素之一,它以对仗工整、简洁精巧的文字描绘美好形象,抒发美好愿望,是中国特有的文学形式,是华人们过年的重要
- 本文实例讲述了C#连接Oracle数据库的方法。分享给大家供大家参考。具体实现方法如下://1、添加引用 System.data.oracl