Bootstrap Popovers

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Post Reply
User avatar
C0D3D
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm
Contact:
Contact C0D3D

Bootstrap Popovers

Post by C0D3D »

Creating popovers with Bootstrap

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enable 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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    // Enable popovers everywhere
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function(element){
        return new bootstrap.Popover(element);
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <p>
      	<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="Default popover">Popover</button>
        <button type="button" class="btn btn-secondary ms-2" data-bs-toggle="popover" title="Popover title" data-bs-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
  	</p>
  	<p><strong>Note:</strong> Click on the buttons to display/hide the popover.</p>
</div>
</body>
</html>

Setting the position of Bootstrap popovers via data attributes

Example 2

Code: Select all

<!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 Data Attributes</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).ready(function(){
    $('[data-bs-toggle="popover"]').popover();
});
</script>
</head>
<body>
<div class="bs-example">
    <p>
        <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" title="Popover title" data-bs-content="Popover on top">Popover on top</button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" title="Popover title" data-bs-content="Popover on right.">Popover on right</button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-bs-content="Popover on bottom.">Popover on bottom</button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" 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>



Setting the position of Bootstrap popovers via JavaScript

Example 3

Code: Select all

<!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>

Dismiss Bootstrap popovers on next click

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hiding Bootstrap Popovers on Next Click</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).ready(function(){
    $('[data-bs-toggle="popover"]').popover({
		placement : 'top'
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <div class="popover-demo mb-2">
        <a href="#" class="btn btn-primary" data-bs-toggle="popover" tabindex="0" data-bs-trigger="focus" title="Popover title" data-bs-content="Default popover">Popover</a>
        <a href="#" class="btn btn-success" data-bs-toggle="popover" tabindex="0" data-bs-trigger="focus" title="Popover title" data-bs-content="Another popover">Another popover</a>
        <a href="#" class="btn btn-info" data-bs-toggle="popover" tabindex="0" data-bs-trigger="focus" title="Popover title" data-bs-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</a>
        <a href="#" class="btn btn-warning" data-bs-toggle="popover" tabindex="0" data-bs-trigger="focus" title="Popover title" data-bs-content="The last tip!">Last popover</a>
    </div>
	<p><strong>Note:</strong> Click on the buttons to show/hide the popover.</p>
</div>
</body>
</html>


Setting the title text for Bootstrap popovers via JavaScript

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set Title Text For Bootstrap Popover 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 50px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myPopover");
    var tooltip = new bootstrap.Popover(element, {
        title : "Default popover title"
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <p>
      	<button type="button" class="btn btn-primary btn-lg" id="myPopover" data-bs-toggle="popover" data-bs-content="This is a button without title attribute. The title text of this popover is defined inside script tag.">Click to toggle popover</button>
  	</p>
</div>
</body>
</html>


Inserting HTML content inside the Bootstrap popovers via JavaScript

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Placing HTML inside Bootstrap Popovers Using JavaScript</title>  
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px 50px;
    }
    /* Custom styles for popover */
    .custom-title{
        margin: 0;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myPopover");
    var popover = new bootstrap.Popover(element, {
        title: '<h4 class="custom-title"><i class="bi-info-circle-fill"></i> Popover info</h4>',
        content: '<p>This is a <em>simple example</em> demonstrating how to insert HTML code inside <strong>Bootstrap popover</strong>.</p>',
        html: true
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg" id="myPopover" data-toggle="popover">Click to toggle popover</button>
</div>
</body>
</html>

Setting the show hide timing of Bootstrap popovers via JavaScript

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Setting Show/Hide Time Delay of Bootstrap Popovers 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 50px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var tinyTrigger = document.getElementById("tinyPopover");
    var largeTrigger = document.getElementById("largePopover");

    // Showing and hiding popover with same speed
    var tinyPopover = new bootstrap.Popover(tinyTrigger, {
        delay: 500
    });

    // Showing and hiding popover with different speed
    var largePopover = new bootstrap.Popover(largeTrigger, {
        delay: {show: 0, hide: 2000}
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <div class="mb-2">    
        <button type="button" class="btn btn-primary btn-lg" id="tinyPopover" data-bs-toggle="popover" title="Popover delay demo" data-bs-content="A small popover that show and hide after 100 milliseconds.">Tiny Popover</button>
        <button type="button" class="btn btn-secondary btn-lg ms-2" id="largePopover" data-bs-toggle="popover" title="Popover delay demo" data-bs-content="A large popover that displayed instantly on button click but hide after 2000 milliseconds after clicking the button once again.">Large Popover</button>
    </div>
    <p><strong>Note:</strong> Click on the buttons to show/hide the popover.</p>
</div>
</body>
</html>


Creating the custom template for Bootstrap popovers via JavaScript

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Custom Template for Bootstrap Popovers 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: 150px 50px;
    }
    /* Styles for custom popover template */
    .popover-footer{
        padding: 6px 14px;
        background-color: #f7f7f7;
        border-top: 1px solid #ebebeb;
        text-align: right;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function(element){
        return new bootstrap.Popover(element, {
        	template: '<div class="popover"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div><div class="popover-footer"><a class="btn btn-secondary btn-sm close">Close</a></div></div>'
    	});
 	});
});
  
// Close popover on button click
document.addEventListener("click", function(e){
    if(e.target && e.target.classList.contains("close")){
        var popover = bootstrap.Popover.getInstance(e.target.closest(".popover"));
        popover.hide();
    }
});
</script>
</head>
<body>
<div class="bs-example">
    <p>
        <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Custom Popover Template" data-bs-content="This is an example of a custom Bootstrap popover.">Popover</button>
        <button type="button" class="btn btn-secondary ms-2" data-bs-toggle="popover" title="Custom Popover Template" data-bs-content="This is another example of a custom Bootstrap popover.">Another Popover</button>
    </p>
    <p><strong>Note:</strong> This is a simple example of customized Bootstrap popover that displays a footer with close button without adding any extra markup to the popover HTML.</p>
    <p>Click on the buttons to show/hide the popover.</p>
</div>
</body>
</html>

Setting the container element for Bootstrap popovers via JavaScript

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Setting Bootstrap Popover's Container 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: 150px 50px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myPopover");
    var popover = new bootstrap.Popover(element, {
        container: "#wrapper"
    });
});
</script>
</head>
<body>
<div id="wrapper" 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>
    <p><strong>Note:</strong> In this example dynamically generated popover HTML code will be inserted at the end of the "#wrapper" div instead of the body element. Inspect the DOM to see the actual result.</p>
    <p><strong>Note: </strong> Press Ctrl+Shift+I (Windows / Linux) or Cmd+Opt+I (Mac) to open Developer tools or DOM Inspector.</p>
</div>
</body>
</html>

Bootstrap show() popover method

Example 10

Code: Select all

<!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>

Bootstrap hide() popover method

Example 11

Code: Select all

<!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>


Bootstrap toggle() popover method

Example 12

Code: Select all

<!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>

Bootstrap dispose() popover method

Example 13

Code: Select all

<!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>

Bootstrap enable() popover method

Example 14

Code: Select all

<!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>


Bootstrap disable() popover method

Example 15

Code: Select all

<!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>


Bootstrap toggleEnabled() popover method

Example 16

Code: Select all

<!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>

Bootstrap update() popover method

Example 17

Code: Select all

<!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>


Bootstrap getInstance() popover method

Example 18

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get Bootstrap Popover Instance 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 btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Trigger the popover
    var myPopover = new bootstrap.Popover(element);

    // Get popover instance on button click
    btn.addEventListener("click", function(){
        var popover = bootstrap.Popover.getInstance(element);
        console.log(popover);
    });
});
</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>First activate popover by clicking the button, then press the "Get Popover Instance" button to get the popover instance associated with a DOM element.</p>
        <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
    	<button type="button" class="btn btn-warning" id="myBtn">Get Popover Instance</button>
    </div>  
</div>
</body>
</html>

Bootstrap getOrCreateInstance() popover method

Example 19

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get Bootstrap Popover Instance 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 btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Get or create popover instance on button click
    btn.addEventListener("click", function(){
        var popover = bootstrap.Popover.getOrCreateInstance(element);
        console.log(popover);
    });
});
</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 class="mt-4">Press the "Get or Create Popover Instance" button to create popover instance or get the popover instance associated with a DOM element. <strong>Popover will not work until you create popover instance</strong>.</p>
        <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
    	<button type="button" class="btn btn-warning" id="myBtn">Get or Create Popover Instance</button>
    </div>  
</div>
</body>
</html>


Display a message when Bootstrap popover fade out transition has been completed

Example 20

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listening to Collapse Events 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>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var myCollapse = document.getElementById("myCollapse");

    myCollapse.addEventListener("hidden.bs.collapse", function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>
</head>
<body>
<div class="m-4">
    <!-- Trigger Buttons HTML -->
    <button type="button" class="btn btn-primary mb-4" id="myBtn" data-bs-toggle="collapse" data-bs-target="#myCollapse">Toggle Element</button>

    <!-- Collapsible Element HTML -->
    <div class="collapse show" id="myCollapse">
        <div class="card card-body">This is a simple example of showing and hiding specific element via data attributes. Click the trigger button to toggle this panel.</div>
    </div>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements
----------------------------------------------------------------------
ImgBB Image upload
Top
Post Reply

Return to “_._Bootstrap_._”

Who is online

Users browsing this forum: Ahrefs [Bot] and 0 guests