当前第2页 返回上一页
1 | $(element).tooltip(options);
|

1 2 3 4 5 6 7 8 9 | <button type= "button" class= "btn btn-default" data-toggle= "tooltip" >按钮</button>
<script>
$( function (){
$( '[data-toggle="tooltip"]' ).tooltip({
title: "我是提示语" ,
placement: 'right'
});
});
</script>
|

【关键字】
除了使用options对象,还可以使用关键字,'show'、'hide'、'toggle'、'destroy'
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body style= "margin-top:50px;" >
<button type= "button" class= "btn btn-default" data-toggle= "tooltip" title= "提示信息" id= "btn1" >按钮1</button>
<button type= "button" class= "btn btn-default" data-toggle= "tooltip" title= "提示信息" id= "btn2" >按钮2</button>
<button type= "button" class= "btn btn-default" data-toggle= "tooltip" title= "提示信息" id= "btn3" >按钮3</button>
<button type= "button" class= "btn btn-default" data-toggle= "tooltip" title= "提示信息" id= "btn4" >按钮4</button>
<script>
$( function (){
$( '#btn1' ).tooltip( 'show' );
$( '#btn2' ).tooltip( 'hide' );
$( '#btn3' ).tooltip( 'toggle' );
$( '#btn4' ).tooltip( 'destroy' );
});
</script>
</body>
|

【事件】
该插件支持5种类型的事件订阅
1 2 3 4 5 | show.bs.tooltip show方法调用之后立即触发该事件
shown.bs.tooltip 此事件在tooltip已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发
hide.bs.tooltip hide方法调用之后立即触发该事件。
hidden.bs.tooltip 此事件在tooltip被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
inserted.bs.tooltip 当tooltip模板加载到DOM中上时,在show.bs.tooltip触发后,触发该事件
|
1 2 3 4 5 6 7 8 9 10 11 12 | <button type= "button" class= "btn btn-default" data-toggle= "tooltip" data-placement= "right" title= "提示信息" id= "btn" >按钮</button>
<script>
$( function (){
$( '#btn' ).tooltip();
$( "#btn" ).on( "show.bs.tooltip" , function (e){
$( this ).html( '关闭提示' );
}).on( "hide.bs.tooltip" , function (e){
$( this ).html( '打开提示' );
})
});
</script>
|

更多编程相关知识,请访问:编程视频!!
以上就是详解Bootstrap中的信息提示框的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
如何使用bootstrap实现年月日的时间选择
bootstrap是什么意思啊
bootstrap怎么设置背景图片
bootstrap分页表格插件使用教程
bootstrap3.0是哪一年推出的
bootstrap 如何创建错误提示
浅谈bootstrap表单验证插件bootstrapvalidator
聊聊jsp页面中导入bootstrap的方法
bootstrap remote用法是什么
bootstrap被淘汰了么
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解Bootstrap中的信息提示框