title: Show one popover and hide other popovers
body: <p>i have several buttons and i need a popover for each.<br>
  i want it like this:<br>
  when my user click on one of them, i want others to be hidden. so only one popover is shown<br>
  check and help me correcting this example plz:  </p>
  
  <pre class="lang-js prettyprint-override"><code>var mycontent='&lt;div class="btn-group"&gt; &lt;button class="btn"&gt;Left&lt;/button&gt; &lt;button class="btn"&gt;Middle&lt;/button&gt; &lt;button class="btn"&gt;Right&lt;/button&gt; &lt;/div&gt;'
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$('.btn').popover({
      html: true,
      content:mycontent,
      trigger: 'manual'
  }).click(function(e) {
      $(this).popover('toggle');
      e.stopPropagation();
  });
  
  $('html').click(function(e) {
       $('.btn').popover('hide');
  });
  </code></pre>
  
  <p>my html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" &gt;Popover&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
         &lt;a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" &gt;Popover&lt;/a&gt; 
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/moalla/fsRaN/2/" rel="noreferrer">jsfiddle example</a></p>
  
  <p>adding something like the code bellow solved my problem somehow:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('.btn').click(function(e) {
       $('.btn').popover('hide');
  });
  </code></pre>
  
  <p>but by clicking twice on each button it goes wrong</p>