js工具提示

最新推荐文章于 2024-08-04 17:39:22 发布

次次皮

最新推荐文章于 2024-08-04 17:39:22 发布

阅读量235

点赞数

分类专栏： bootstrap学习笔记

本文链接：https://blog.csdn.net/yszbrzdd/article/details/82714490

版权

bootstrap学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

代码段：

<!DOCTYPE html> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- 引入 Bootstrap --> 
        <script src="js/jquery/3.3.1/jquery.min.js"></script> 
        <link href="css/bootstrap/3.3.7/bootstrap.min.css" rel="stylesheet"> 
        <script src="js/bootstrap/3.3.7/bootstrap.min.js"></script>  
        <script src="js/holder.min.js"></script> 
        <!--<script src="js/docs.min.js"></script> -->
    </head>
    <body>
        <div class="container">
            <!--工具提示开始-->
            <div class="tooltip-demo">
                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
                    
                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
                    
                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
            </div>
            <!--工具提示结束-->
            <!--弹出框开始-->
            <div clas="popover-demo">
                <button type="button" class="btn btn-sm btn-danger" data-toggle="popover" data-container="body" data-trigger="popover" data-placement="bottom" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">popover on 底部</a>
                <!--data-placement="bottom|top|right|left"弹出框的位置下上左右-->
            </div>
            <!--弹出框结束-->
        </div>
    </body>
    <script>
        /*工具提示初始化*/
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        });
        /*弹出框初始化*/
        $(function () {
            $('[data-toggle="popover"]').popover()
        })
        
    </script>
</html>

运行效果： js工具提示