Geek Answers Handbook

How to create Bootstrap Popover Close Option

As you can see in jQuery , I used the answer to this question to make Bootstrap Popover disappear in an external click. Now I want to add an "x" in the upper right corner that closes the popover when clicked.

Is there an easy way to create a clickable "x" in the upper right corner of the popover that closes the popover when clicked?

HTML:

<h3>Live demo</h3> <div class="bs-docs-example" style="padding-bottom: 24px;"> <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here some amazing content. It very engaging. right?">Click to toggle popover</a> </div>

JQuery

 var isVisible = false; var clickedAway = false; $('.btn-danger').popover({ html: true, trigger: 'manual' }).click(function(e) { $(this).popover('show'); clickedAway = false isVisible = true e.preventDefault() }); $(document).click(function(e) { if (isVisible & clickedAway) { $('.btn-danger').popover('hide') isVisible = clickedAway = false } else { clickedAway = true } });
+6
source share
3 answers

here is the jquery code:

This simply adds the X button to the upper right corner:

  var isVisible = false; var clickedAway = false; $('.btn-danger').popover({ html: true, trigger: 'manual' }).click(function(e) { $(this).popover('show'); $('.popover-title').append('<button type="button" class="close">&times;</button>'); clickedAway = false isVisible = true e.preventDefault() }); $(document).click(function(e) { if(isVisible & clickedAway) { $('.btn-danger').popover('hide') isVisible = clickedAway = false } else { clickedAway = true } });

And this one closes the popup only when you press the X button:

  $('.btn-danger').popover({ html: true, trigger: 'manual' }).click(function(e) { $(this).popover('show'); $('.popover-title').append('<button type="button" class="close">&times;</button>'); $('.close').click(function(e){ $('.btn-danger').popover('hide'); }); e.preventDefault(); });
+15
source

This question has already been answered, but your post half-helped me. Having stumbled upon an easier way to accomplish this task, suppose you have all the popovers with the ".pop" class, this should solve all your problems.

 $('.pop').on({ click:function(){ $('.pop').not(this).popover('hide'); } });
+1
source

I used the html tag in my jquery code ....

 $("#mypopover").popover({ html: true, title: "Title"+ '<div class="pull-right"><a href="javascript:;" id="close" class="glyphicon glyphicon-remove" style="color: #C7C3C3"></a></div>', placement: placement, content: "My Popover Content" }); $("#mypopover").popover('show');

if you want to close your popover you can do this:

 $("#close").popover("hide");

or that:

 $("#close").popover("destroy"); if you have many popovers
-1
source

More articles:


All Articles