本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家详细介绍一下Bootstrap中的信息提示框。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语。【相关推荐:《bootstrap教程》】
基本用法
Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件:
1、通过 title 属性的值来定义提示信息(也可以使用自定义属性 src-title 来设置提示信息),title属性的优先级高
2、通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top、right、bottom和left,分别表示提示框出现的位置在顶部、右边、底部和左边
3、还有一个最重要的参数不可缺少,data-toggle="tooltip"
【触发方式】
Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发
最简单的触发方式如下:
1 2 3 | $( function (){
$( '[data-toggle="tooltip"]' ).tooltip();
});
|
1 2 3 4 5 6 7 8 9 10 | <body style= "margin:80px;" >
<button type= "button" class= "btn btn-default" data-toggle= "tooltip" data-placement= "left" data-original-title= "提示框居左" title= "左边提示框" >提示框居左</button>
<button type= "button" class= "btn btn-default" data-toggle= "tooltip" data-placement= "top" data-original-title= "提示框在顶部" >提示框在顶部</button>
<button type= "button" class= "btn btn-default" data-toggle= "tooltip" data-placement= "bottom" data-original-title= "提示框在底部" >提示框在底部</button>
<button type= "button" class= "btn btn-default" data-toggle= "tooltip" data-placement= "right" data-original-title= "提示框居右" >提示框居右</button>
<script>
$( function (){
$( '[data-toggle="tooltip"]' ).tooltip();
});
</script>
|
属性参数
提示框组件提供了7个自定义属性参数,用来对提示框进行设置
1 2 3 4 5 6 7 8 9 10 11 12 | < body style = "margin-top:80px;" >
< button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "top" data-original-title = "无动画" data-animation = "false" >无动画</ button >
< button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "top" data-original-title = "有动画" >有动画</ button >
< button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "top" data-original-title = "hover触发" data-trigger = "hover" >hover触发</ button >
< button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "top" data-original-title = "click触发" data-trigger = "click" >click触发</ button >
< button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "top" data-original-title = "不延迟" >不延迟</ button >
< button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "top" data-original-title = "延迟500ms" data-delay = "500" >延迟500ms</ button >
< script >
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</ script >
|
JS触发
除了上面所说的最简单的一种触发方法,也可以单独指定一个元素,在该元素上调用Tooltip组件,并且还可以提供各种javascript形式的自定义参数,而无需使用以data-开头的元素自定义属性
阅读剩余部分
相关阅读 >>
bootstrap该怎么安装
bootstrap动态进度条怎么搞
bootstrap 怎么设置字体颜色
bootstrap的栅格系统是什么?栅格系统详解
bootstrap可以用来干什么
bootstrap怎么改样式
bootstrap有哪些组件
bootstrap table给行怎么加背景色
bootstrap与vue区别
bootstrap有哪些技术特点
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解Bootstrap中的信息提示框