title: Hide tool tip on clicking outside is not working Jquery
body: <p>I am not able to open the tooltip post closing the same by clicking outside the button. Appreciate the help.</p>
  
  <p>Below are the ways to reproduce the issue</p>
  
  <ol>
  <li>Click on the button</li>
  <li>Click outside of button to close the tooltip</li>
  <li>Click the button again to open the tooltip</li>
  </ol>
  
  <p>Note : Button requires two clicks to open the tooltip post-closing by clicking outside of the div.</p>
  
  <p>Below is the source code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Example of Setting Container for Bootstrap 3 Popover&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      // Append popover HTML to wrapper element
      $("#myPopovers a").popover({
    container: '.wrapper'
   }); 
  });
  &lt;/script&gt;
  &lt;script&gt;
    $(document).mouseup(function (e){
    var container = $(".popover");
    if (!container.is(e.target) &amp;&amp; container.has(e.target).length === 0){
      container.fadeOut();
   
    }
  }); 
    
    &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .bs-example {
   margin: 150px 50px;
  }
  .bs-example a {
   margin: 5px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bs-example"&gt;
    &lt;div class="wrapper"&gt;
      &lt;div id="myPopovers"&gt; &lt;a href="#" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover"&gt;Popover&lt;/a&gt; &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>