bootstrap实现弹出提示为图片

最新推荐文章于 2025-06-24 14:25:32 发布

辣姐什么鬼

最新推荐文章于 2025-06-24 14:25:32 发布

阅读量1.4w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： web前端 bootstrap

本文链接：https://blog.csdn.net/liona_koukou/article/details/51942308

web前端专栏收录该内容

174 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现鼠标悬停时显示二维码的方法。通过设置按钮的data-toggle属性为popover，并结合Bootstrap框架，可以轻松实现该功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：鼠标移至弹出二维码

首先title下面引入

<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

两个按钮布局的CSS就不放了，没有什么影响

<div class="right">
    <a id="app" style="background-image:url('app.png')" class="btn" data-toggle="popover" data-placement="bottom"></a>
    <a id="weixin" style="background-image:url('weixin.png')" class="btn" data-toggle="popover" data-placement="bottom"></a>
</div>

script

<script>
    $('#app').popover({
        trigger : 'hover',//鼠标以上时触发弹出提示框
        html:true,//开启html 为true的话，data-content里就能放html代码了
        content:"<img src='1.png'>"
    });
    $('#weixin').popover({
        trigger : 'hover',
        html:true,
        content:"<img src='2.png'>"
    });
</script>

完成