详解Bootstrap中的信息提示框


当前第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>

3.gif

【关键字】

  除了使用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>

4.gif

【事件】

  该插件支持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>

5.gif

更多编程相关知识,请访问:编程视频!!

以上就是详解Bootstrap中的信息提示框的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

如何使用bootstrap实现年月日的时间选择

bootstrap是什么意思啊

bootstrap怎么设置背景图片

bootstrap分页表格插件使用教程

bootstrap3.0是哪一年推出的

bootstrap 如何创建错误提示

浅谈bootstrap表单验证插件bootstrapvalidator

聊聊jsp页面中导入bootstrap的方法

bootstrap remote用法是什么

bootstrap被淘汰了么

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...