html input tooltip,BootStrap tooltip提示框使用小结
提示框
提示框的基本使用方式为:
test message
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实战教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html input tooltip,BootStrap tooltip提示框使用小结相关推荐
- 爬虫训练场项目前端之 Bootstrap 信息提示框,按钮与按钮组,徽章,进度条
爬虫训练场项目前端之 Bootstrap 信息提示框,按钮与按钮组,徽章,进度条 Bootstrap5 信息提示框 Bootstrap 5 按钮和按钮组 Bootstrap 5 徽章 进度条 Boot ...
- Bootstrap 信息提示框
一.Bootstrap 信息提示框 1.1 基本信息提示框 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .a ...
- 04.tooltip提示框插件,linkbutton按钮插件与progressbar进度条插件
tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...
- bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名 描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
- Bootstrap 提示工具(Tooltip)弹出框
第一步: 加载3个框架 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">< ...
- 如何在html上做弹框效果,网页|利用提示框(Tooltip)实现弹窗效果
一.提示框的运用 二.Tooltip简单介绍 提示工具(Tooltip)是一个插件,可以根据需求生成标记内容,但在默认情况下是把提示工具(tooltip)放在它们的触发元素后面.在bootstrap中 ...
- echarts 饼图每块颜色_读者提问,如何让 tooltip 提示框内显示饼图
效果截图 前些天有读者问,ECharts 的提示框(tooltip)内,能不能添加一个饼图? 我之前倒是看到过用饼图作为散点图数据点的例子,感觉应该有办法--但是提示框和那个不太一样,估计需要研究一下 ...
- Echart遇到的问题:tooltip提示框大小异常
Echart遇到的问题:tooltip提示框大小异常 参考文章: (1)Echart遇到的问题:tooltip提示框大小异常 (2)https://www.cnblogs.com/wyhluckdog ...
- EasyUI中ToolTip提示框的简单使用
场景 效果 属性 名称 类型 描述 默认值 position string 提示框(tooltip)位置.可能的值:'left'.'right'.'top'.'bottom'. bottom cont ...
最新文章
- 第15章节-Python3.5-Django实现用户登录与前端交互2 14
- 十三、序列化和反序列化(部分转载)
- 黑客内参告诉你一个:设计师用div+css 必须知道的网页布局类型
- 网易2020校招笔试编程题回顾
- 深入 AngularUI Router
- 动态修改网页icon图标
- drawboard pdf拆分文件_掌握在线PDF拆分技巧,从此打开文件不再处于“加载中”...
- java -jar命令
- 二级c语言试题讲解,计算机二级C语言真题讲解.ppt
- 2017计算机一级考试试题题库,2017年计算机一级考试题库试题及答案
- 矩阵乘法,输出结果矩阵
- 采用Armjio非精确线搜索准则的最速下降法--MATLAB实现
- python链式函数_python 链式
- 弗洛伊德的人格结构说中潜意识,前意识,意识和自我,本我,超我的区别
- 软件工程和计算机科学考公务员,软件工程可以考公务员吗
- eNSP和HCL兼容共存问题
- 两个三进制数相加,输出一个结果为三进制形式的和
- 公众号淘客怎么运营推广,找到适合自己的的推广方法才有效
- c语言随机数字密码生成器,随机数生成器(浮点数整型数)
- 驼色的羊绒大衣怎么搭配好看