Live Demo: Calling Bootstrap Tooltip Methods Using JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip 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 auto;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
  	var showTooltip = document.getElementById("showTooltip");
    var hideTooltip = document.getElementById("hideTooltip");
    var toggleTooltip = document.getElementById("toggleTooltip");
    var enableTooltip = document.getElementById("enableTooltip");
    var disableTooltip = document.getElementById("disableTooltip");
    var toggleEnabledTooltip = document.getElementById("toggleEnabledTooltip");
    var updateTooltip = document.getElementById("updateTooltip");
    var disposeTooltip = document.getElementById("disposeTooltip");
  
  	// Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(document.getElementById("myTooltip"));
  
  	showTooltip.addEventListener("click", function(){
        myTooltip.show();
    });
  
  	hideTooltip.addEventListener("click", function(){
        myTooltip.hide();
    });
  
  	toggleTooltip.addEventListener("click", function(){
        myTooltip.toggle();
    });
  
  	enableTooltip.addEventListener("click", function(){
        myTooltip.enable();
    });
  	
  	disableTooltip.addEventListener("click", function(){
        myTooltip.disable();
    });
  
  	toggleEnabledTooltip.addEventListener("click", function(){
        myTooltip.toggleEnabled();
    });
  	
  	updateTooltip.addEventListener("click", function(){
        myTooltip.update();
    });
  
  	disposeTooltip.addEventListener("click", function(){
        myTooltip.dispose();
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	  <button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>