使用bootstrap实现鼠标放上div就弹出弹框
可以使用Bootstrap中的Popover组件来实现鼠标放上div就弹出弹框的效果。
首先，在HTML中添加一个需要弹出弹框的div，并设置data-toggle和data-content属性：
<div class="my-div" data-toggle="popover" data-content="这是弹框内容">鼠标放上我</div>
然后，在JavaScript中初始化Popover组件：
$(function () {
$('[data-toggle="popover"]').popover()
})
最后，可以通过CSS来自定义弹框的样式，例如修改背景颜色、边框等：
.popover {
background-color: #fff;
border: 1px solid #ccc;
}
完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Popover</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<style>
.popover {
background-color: #fff;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="my-div" data-toggle="popover" data-content="这是弹框内容">鼠标放上我</div>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
``
原文地址: https://www.cveoy.top/t/topic/ch2Y 著作权归作者所有。请勿转载和采集!