bootstrap data-toggle 冲突(如何同时使用tooltip工具提示和modal模态框)

https://blog.csdn.net/weixin_44555663/article/details/105075422

在做web课后作业的时候遇到了一个问题,记录一下。

1.button中使用模态框

<button type="button" data-placement="bottom" title="Click here to log in" 
             class="btn btn-primary tooltip-toggle" data-toggle="modal"
             data-target="#exampleModal" data-whatever="@mdo">
             Login
             </button>

data-toggle=“modal”

2.js实现tooltip
1)在button中依旧写入data-placement(显示位置) 和 title(显示内容)
2)在button的class中添加tooltip-toggle类(任意取名,只要和jQuery 元素选择器的内容对应即可)
3)在js文件中添加$(’.tooltip-toggle’).tooltip();表示这个类需要实现tooltip的功能==在button中写入data-toggle=“tooltip”
4)注意一个点:如果是直接在html中写js,需要将写在bootstrap和jquery的js文件导入代码下面

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 文件夹导入 -->
    <script src="./js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('.tooltip-toggle').tooltip();
        });
    </script>

 


————————————————
版权声明:本文为CSDN博主「余丁」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44555663/article/details/105075422

上一篇:修改UIView的默认Layer后,修改View的值会动态修改Layer的值


下一篇:纯CSS中如何实现单击按钮开关