现场演示：我的 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Placement of Bootstrap Popovers via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 150px 50px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    // Placement of popover on top
    var popTop = document.getElementById("popTop");
    var popoverTop = new bootstrap.Popover(popTop, {
        placement : "top"
    });

// Placement of popover on right
    var popRight = document.getElementById("popRight");
    var popoverRight = new bootstrap.Popover(popRight, {
        placement : "right"
    });

// Placement of popover on bottom
    var popBottom = document.getElementById("popBottom");
    var popoverBottom = new bootstrap.Popover(popBottom, {
        placement : "bottom"
    });

// Placement of popover on left
    var popLeft = document.getElementById("popLeft");
    var popoverLeft = new bootstrap.Popover(popLeft, {
        placement : "left"
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <p>
        <button type="button" class="btn btn-secondary" id="popTop" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover on top">Popover on top</button>
        <button type="button" class="btn btn-secondary" id="popRight" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover on right.">Popover on right</button>
        <button type="button" class="btn btn-secondary" id="popBottom" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover on bottom.">Popover on bottom</button>
        <button type="button" class="btn btn-secondary" id="popLeft" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover on left.">Popover on left</button>
    </p>
	<p><strong>Note:</strong> Click on the buttons to display/hide the popover.</p>
</div>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Placement of Bootstrap Popovers via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px 50px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    // Placement of popover on top
    var popTop = document.getElementById("popTop");
    var popoverTop = new bootstrap.Popover(popTop, {
        placement : "top"
    });
​
    // Placement of popover on right
    var popRight = document.getElementById("popRight");
    var popoverRight = new bootstrap.Popover(popRight, {
        placement : "right"
    });
​
    // Placement of popover on bottom
    var popBottom = document.getElementById("popBottom");
    var popoverBottom = new bootstrap.Popover(popBottom, {
        placement : "bottom"
    });
​
    // Placement of popover on left
    var popLeft = document.getElementById("popLeft");
    var popoverLeft = new bootstrap.Popover(popLeft, {
        placement : "left"
    });
});
</script>
</head>