title: Bootstrap Popover with Added Close Option Submits Form Also
body: <p>As you can see in this <a href="http://jsfiddle.net/LRCNm/7/" rel="nofollow">jQuery</a>, I have a Boostrap Popover that is able to close with an outside click as well as with a click on the "x." </p>
  
  <p>However, when this popover is placed within a form, it also submits the form.</p>
  
  <p>Is there a way to get the functionality of this closeable popover without submitting the form once clicked?</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;form action="quote-calculator.php" method="post"&gt;
      &lt;div class="bs-docs-example" style="padding-bottom: 24px;"&gt;
        &lt;a href="#" class="more-info btn btn-large btn-danger" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?"&gt;Click to toggle popover&lt;/a&gt;
      &lt;/div&gt;
  &lt;/form&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');
              $('.popover-content').append('&lt;button class="close" style="position: absolute; top: 0; right: 6px;"&gt;&amp;times;&lt;/button&gt;');
                  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>