现场演示：我的 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Popover Methods Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px 20px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
  	var showPopover = document.getElementById("showPopover");
    var hidePopover = document.getElementById("hidePopover");
    var togglePopover = document.getElementById("togglePopover");
    var enablePopover = document.getElementById("enablePopover");
    var disablePopover = document.getElementById("disablePopover");
    var toggleEnabledPopover = document.getElementById("toggleEnabledPopover");
    var updatePopover = document.getElementById("updatePopover");
    var disposePopover = document.getElementById("disposePopover");
  
  	// Create a popover instance
    var myPopover = new bootstrap.Popover(document.getElementById("myPopover"));
  
  	showPopover.addEventListener("click", function(){
        myPopover.show();
    });
  
  	hidePopover.addEventListener("click", function(){
        myPopover.hide();
    });
  
  	togglePopover.addEventListener("click", function(){
        myPopover.toggle();
    });
  
  	enablePopover.addEventListener("click", function(){
        myPopover.enable();
    });
  	
  	disablePopover.addEventListener("click", function(){
        myPopover.disable();
    });
  
  	toggleEnabledPopover.addEventListener("click", function(){
        myPopover.toggleEnabled();
    });
  	
  	updatePopover.addEventListener("click", function(){
        myPopover.update();
    });
  
  	disposePopover.addEventListener("click", function(){
        myPopover.dispose();
    });
});
</script>
</head>
<body>
<div class="bs-example"> 
    <p>
        <button type="button" class="btn btn-primary btn-lg" id="myPopover" data-bs-toggle="popover" title="Popover title" data-bs-content="This is a simple Bootstrap popover with a title and some content.">Click to toggle popover</button>
    </p>
    <div class="mt-5">
        <p>Click on the following buttons to control the popover manually.</p>
    	  <button type="button" class="btn btn-primary" id="showPopover">Show</button>
        <button type="button" class="btn btn-warning" id="hidePopover">Hide</button>
        <button type="button" class="btn btn-success" id="togglePopover">Toogle</button>
        <button type="button" class="btn btn-info" id="enablePopover">Enable</button>
        <button type="button" class="btn btn-secondary" id="disablePopover">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledPopover">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updatePopover">Update</button>
        <button type="button" class="btn btn-danger" id="disposePopover">Dispose</button>
    </div>  
</div>
</body>
</html>