我的用例是这样的：我有一个用户可以单击下载的文件列表。 我希望他们能够将鼠标悬停在文件上并查看文件大小和校验和。 如果需要的话，我还希望他们能够选择校验和值并将其复制到剪贴板。 初始化每个项目上的弹出窗口并手动使其在鼠标悬停时显示效果很好。 但是，我不确定如何隐藏弹出窗口。 我希望我可以将 mouseleave eventListener 添加到弹出窗口本身，但这似乎不是一个选项。 显然，我想保留单击元素本身来启动下载。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css" integrity="sha512-9xKTRVabjVeZmc+GUW8GgSmcREDunMM+Dt/GrzchfN8tkwHizc5RP4Ok/MXFFy5rIjJjzhndFScTceq5e6GvVQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</head>
<body>
<br/>
<a href="#"
data-bs-toggle="popover"
data-bs-content="size: 5MB<br/>sha1: 123456789"
>
FILE_TO_DOWNLOAD_1
</a>
<br/>
<br/>
<a href="#"
data-bs-toggle="popover"
data-bs-content="size: 5MB<br/>sha1: 123456789"
>
FILE_TO_DOWNLOAD_2
</a>
<script>
$(document).ready(function() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
var popover = new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'manual'
});
popoverTriggerEl.addEventListener('mouseover', (event) => {
popover.show();
});
return popover;
});
});
</script>
</body>想法是在隐藏弹出窗口之前允许几毫秒的延迟。如果元素或弹出窗口收到
mouseenter从技术上讲，对于每个弹出窗口，
tipaddEventListener为了获得更好的触感，我们在打开新弹出窗口时关闭所有其他弹出窗口。
addEventListener('DOMContentLoaded', function() {
var elements = document.querySelectorAll('[data-bs-toggle="popover"]')
var popoverTriggerList = [].slice.call(elements);
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
var popover = new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'manual'
});
var tip = null;
var timeout = null
function showPopover() {
clearTimeout(timeout);
if (!tip) {
popover.show();
popoverList.forEach(function(other) {
if (other !== popover) {
other.hide()
}
})
tip = popover.tip;
tip.addEventListener('mouseenter', (ev) => {
showPopover();
});
tip.addEventListener('mouseleave', (ev) => {
hidePopover();
});
}
}
function hidePopover() {
timeout = setTimeout(function() {
popover.hide();
tip = null;
timeout = null;
}, 250)
}
popoverTriggerEl.addEventListener('mouseenter', (ev) => {
showPopover()
})
popoverTriggerEl.addEventListener('mouseleave', (ev) => {
hidePopover()
});
return popover;
});
});<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body style="background: #333; color: #fff; padding: 20px;">
<br />
<a href="#" data-bs-toggle="popover" data-bs-content="size: 5MB<br/>sha1: 123456789">
FILE_TO_DOWNLOAD_1
</a>
<br />
<br />
<a href="#" data-bs-toggle="popover" data-bs-content="size: 5MB<br/>sha1: 123456789">
FILE_TO_DOWNLOAD_2
</a>
</body>