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