title: click anywhere on the page and the popover should disappear
body: <p>I have an Icon that if you click on it a popover appears with some data populated from a webservice. but the problem is I want the popover appears whenever I click on it and <strong>disappears whenever I click anywhere else on the page</strong>!</p>
  
  <p>Could you please let me know how I can do that?</p>
  
  <p>PS:I already tried trigger:'manual' but it did not work for my example!</p>
  
  <p>My code here:</p>
  
  <pre><code>$('#myIcon').click(function (e) {
      e.preventDefault();
      var $this = $(this);
      $.ajax({
                  type: "POST",
                  url: "myURL"
              }).done(function (data) {                                           
                  $this.popover({
                      placement:'bottom',                                        
                      content: function () {
                          html = "&lt;table class='table table-bordered ' id='myTbl'&gt;&lt;tbody id='myTblBody'&gt;";
                          for (var i = 0; i &lt; data.length; i++) {
                              html = html + "&lt;tr&gt;&lt;td&gt;" + data[i]['username'] + "&lt;/td&gt;&lt;/tr&gt;";
                          }
                          html = html + "&lt;/tbody&gt;&lt;/html&gt;";
                          return html;
                      },
                      html: true,
                  })
              });
  });
  </code></pre>