Bootstrap实现鼠标悬停图片显示二维码

想要实现鼠标悬停在图片上时显示二维码？使用Bootstrap的Popover组件和一些自定义CSS样式就能轻松做到！

1. HTML结构

首先，在HTML中添加一个包含图片的元素，并为其设置一个唯一的ID作为标识符。同时，添加data-toggle='popover'、data-trigger='hover'、data-placement='top'等属性来配置Popover组件，并使用data-content属性设置要显示的二维码图片路径：

<img src='your-image.jpg' id='qr-code-img' data-toggle='popover' data-trigger='hover' data-placement='top' data-content='<img src=\'your-qr-code.jpg\' alt=\'QR Code\'>' />

2. JavaScript初始化

然后，在JavaScript中使用jQuery和Bootstrap的Popover插件初始化弹出窗口，并将html属性设置为true以允许HTML内容，将sanitize属性设置为false以防止转义HTML标签：

$(document).ready(function(){
    $('#qr-code-img').popover({
        html: true,
        sanitize: false
    });
});

3. CSS样式调整

接下来，使用CSS样式来调整弹出窗口的样式，使其适合显示二维码图，例如控制弹出框的宽度、内边距以及二维码图片的大小：

.popover {
    max-width: none;
    width: auto;
}

.popover-content {
    padding: 0;
}

.popover-content img {
    width: 200px;
    height: 200px;
}

4. 引入必要文件

最后，确保你的项目中已经引入了Bootstrap的CSS和JavaScript文件，以及jQuery库文件。

完成以上步骤后，当你的鼠标悬停在图片上时，就会弹出一个包含二维码图的弹出窗口啦！是不是很简单实用呢？