As you can see in the jQuery, I have used the answer from this question to make a Bootstrap Popover disappear on an outside click. Now I am looking to add an "x" in the top right corner that closes the popover on click. Is there a simple way to create a clickable "x" on the top right corner of the popover that would close the popover when clicked?HTML: \[code\]<h3>Live demo</h3> <div class="bs-docs-example" style="padding-bottom: 24px;"> <a href="http://stackoverflow.com/questions/15606760/#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a> </div>\[/code\]jQuery:\[code\] 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 } });\[/code\]