Bootstrap Popover: 如何实现鼠标悬停显示弹框
可以使用 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/jNe7 著作权归作者所有。请勿转载和采集!