title: How to create Bootstrap Popover Close Option
body: <p>As you can see in the <a href="http://jsfiddle.net/LRCNm/1/" rel="nofollow noreferrer">jQuery</a>, I have used the answer from <a href="https://stackoverflow.com/questions/8947749/how-can-i-close-a-twitter-bootstrap-popover-with-a-click-from-anywhere-else-on">this question</a> 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. </p>
  
  <p>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?</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;h3&gt;Live demo&lt;/h3&gt;
  &lt;div class="bs-docs-example" style="padding-bottom: 24px;"&gt;
      &lt;a href="#" 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?"&gt;Click to toggle popover&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><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 &amp; clickedAway) {
          $('.btn-danger').popover('hide')
          isVisible = clickedAway = false
      } else {
          clickedAway = true
      }
  });
  </code></pre>