登录  /  注册

详解Bootstrap中的信息提示框

青灯夜游
发布: 2021-04-14 10:19:30
转载
2652人浏览过

本篇文章给大家详细介绍一下bootstrap中的信息提示框。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

详解Bootstrap中的信息提示框

提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语。【相关推荐:《bootstrap教程》】

基本用法

Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮

1、通过 title 属性的值来定义提示信息(也可以使用自定义属性 src-title 来设置提示信息),title属性的优先级高

2、通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top、right、bottom和left,分别表示提示框出现的位置在顶部、右边、底部和左边

3、还有一个最重要的参数不可缺少,data-toggle="tooltip"

【触发方式】

  Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发

  最简单的触发方式如下:

$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
登录后复制





<script>
$(function(){
    $(&amp;#39;[data-toggle=&quot;tooltip&quot;]&amp;#39;).tooltip();
});    
</script>
登录后复制

1.gif

属性参数

  提示框组件提供了7个自定义属性参数,用来对提示框进行设置








<script>
$(function(){
    $(&amp;#39;[data-toggle=&quot;tooltip&quot;]&amp;#39;).tooltip();
});    
</script>
登录后复制

2.gif

JS触发

  除了上面所说的最简单的一种触发方法,也可以单独指定一个元素,在该元素上调用Tooltip组件,并且还可以提供各种javascript形式的自定义参数,而无需使用以data-开头的元素自定义属性

$(element).tooltip(options);
登录后复制

<button type="button" class="btn btn-default" data-toggle="tooltip" >按钮</button>
<script>
$(function(){
    $(&#39;[data-toggle="tooltip"]&#39;).tooltip({
        title:"我是提示语",
        placement:&#39;right&#39;
    });
});    
</script>
登录后复制

3.gif

【关键字】

  除了使用options对象,还可以使用关键字,'show'、'hide'、'toggle'、'destroy'


<body   style="max-width:90%">
<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(){
    $(&#39;#btn1&#39;).tooltip(&#39;show&#39;);//显示提示语
    $(&#39;#btn2&#39;).tooltip(&#39;hide&#39;);//关闭提示语
    $(&#39;#btn3&#39;).tooltip(&#39;toggle&#39;);//反转提示语
    $(&#39;#btn4&#39;).tooltip(&#39;destroy&#39;);//隐藏并销毁提示语
});    
</script>
</body>
登录后复制

4.gif

【事件】

  该插件支持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触发后,触发该事件
登录后复制
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="提示信息" id="btn">按钮</button>
<script>
$(function(){
    $(&#39;#btn&#39;).tooltip();
    $("#btn").on("show.bs.tooltip",function(e){
        $(this).html(&#39;关闭提示&#39;);    
    }).on("hide.bs.tooltip",function(e){
        $(this).html(&#39;打开提示&#39;);
    })

});    
</script>
登录后复制

5.gif

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

以上就是详解Bootstrap中的信息提示框的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号