Q:

How to insert close button in Bootstrap popover

mhmadesk
Save to bookmark
|
2022-05-19
|
  183 
Easy
0

How to insert close button in Bootstrap popover

Bootstrap,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-19
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the Popover's html Option

You can use the Bootstrap popover's html option to insert the close button inside the popover. Further you can utilize the .popover('hide') method to hide the popover when a user click on the close button. Let's try out the following example and see how it works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Popover with Close Button</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        html : true,
        title : 'User Info <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div class="media"><img src="images/avatar-tiny.jpg" class="mr-3" alt="Sample Image"><div class="media-body"><h5 class="media-heading">Jhon Carter</h5><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
    });
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
    });
});
</script>
<style>
	.wrapper{
    	margin: 200px 150px 0;
    }
    .popover-title .close{
        position: relative;
        bottom: 3px;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button>
    </div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

BOOTSTRAP / SASS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to make Bootstrap popover appear/disappear on ... >>
<< How to change the default width of Bootstrap modal...